Image.onload 不適用於 .jpg 圖像更改為 .png

Question

我正在開發 Cordova windows10 應用程序，我使用（ navigator.camera.getPicture(resolve, reject, {...encodingType: 0,...} ）將圖像捕獲為“jpg”，通過更改擴展名為“.png”，目前正在嘗試調整它的大小。但是，當我嘗試加載圖片時，它不會加載而是拋出：

DOM7009：無法將 url 中的圖像解碼：“.../myimage.png”到 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)) ... }

問題是圖像根本沒有加載。 我在image.onload函數中進行了 console.logged，但它沒有顯示出來。 不知道為什么它加載“.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

希望是有用的信息。 即使您的問題不是我一直在談論的問題，我寫的內容對您的代碼仍然有效。