.jpg画像が.jpg画像では機能しません。

Question

私は画像を 'jpg'として（navigator.camera.getPicture(resolve, reject, {...encodingType: 0,...}）を使用して画像をキャプチャし、拡張子を '.png'として変更して別の場所に移動します現在、サイズを変更しようとしています。しかし、画像をロードしようとすると、ロードされずにDOM7009: Unable to decode image at url: '.../myimage.png' to MIME 'image/png'がスローされます。

イメージが「.png」としてキャプチャされていても、元のイメージが「.jpeg」で、拡張子が「.png」に変更されている場合は正しく動作します。私はイメージをロードしようとする前に以下のことをします。

let canvas = document.createElement('canvas'); 
 
let ctx = canvas.getContext('2d'); 
 
let image = new Image(); 
 
image.src = fileSystemPath + imageName // I get : ms-appdata:///local/randomgeneratedID.png 
 

 
image.onload = function() { 
 
    ... 
 
    ctx.drawImage(image, 0, 0, myHeight, myWidth); 
 
    callback(canvas.toDataURL("image/png", 0.9)) 
 
    ... 
 
}

問題は、画像がまったくロードされていないということです。私console.loggedはimage.onloadの機能の中にあり、表示されません。それが '.png'ファイルをロードする理由はわかりませんが、 '.jpg'ファイルは '.png'という名前に変更されていません。

Answer 1

問題は、画像がまったく読み込まれていないことです。私はimage.onload関数の中にconsole.loggedして表示されません。

私はあなたのの.png画像はかなり重いですと仮定します：

イメージがあなたの新しい一方

'.PNG' として捕獲されたときにそれは完璧に動作します。 png（ex-jpeg）イメージは軽量です：

拡張子を '.png'に変更して別の場所に移動し、サムネイルにサイズ変更します。そこに起こったかもしれない何

あなたは最初の値にimg.srcを設定することである - と実際のロードは、右この瞬間に始まるが、ハンドラが後で設定されています。したがって、イメージがかなり小さい/キャッシュされている（あなたがそれらのサイズを変更したと書いた）場合、ハンドラが割り当てられる前にダウンロードすることができます。この方法で試してみてください：

image.onload = function() // handler first 
image.src = fileSystemPath + imageName // loading next 

希望の情報です。あなたの問題が私が話していた問題ではない場合でも、私が書いたことはあなたのコードに対して有効です。