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函数内部进行了控制。它没有显示出来。不确定为什么它会加载'.png'文件而不是'.jpg'文件重命名为'.png'。

Answer 1

问题是图像根本没有加载。我在image.onload函数内安装了console.log并且没有显示。

我认为您的 .png 图片相当沉重：

当图像被捕获为'.png'
时，它可以正常工作

而您的新 .png （ex-jpeg）图片重量轻：

将扩展程序更改为“.png”并将其调整为缩略图，将其移至其他位置。

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

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

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

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

1 个答案: