javascript - Image.onload 不适用于 .jpg 图像更改为 .png

Question

我正在开发一个 Cordova windows10 应用程序，我使用 (navigator.camera.getPicture(resolve,reject, {...encodingType: 0,...}) 将图像捕获为“jpg” )，通过将扩展名更改为“.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))
  ...
}

问题是图像根本无法加载。我在 image.onload 函数内部进行 console.logged，但它没有显示。不知道为什么它加载“.png”文件，但不加载重命名为“.png”的“.jpg”文件。

Answer 1

The issue is that the image is not loading at all. I console.logged right inside the image.onload function and it's not showing.

我认为您的 .png 图像相当重:

It works perfectly when the image is captured as '.png'

而您的新 .png(前 jpeg)图像重量较轻:

move it to another location by changing the extension as '.png' and resize it to thumbnail.

可能发生的情况是，您首先将img.src设置为一个值 - 实际加载就在此时开始，但是处理程序稍后设置。因此，如果图像非常小/缓存(您写道您调整了它们的大小)，则可以在分配处理程序之前下载它。尝试这样做:

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

希望这是有用的信息。即使您的问题不是我一直在谈论的问题，我编写的内容对于您的代码仍然有效。