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

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