javascript - 使用 getImageData 时在移动设备上获取大图像的错误数据

Question

由于上一篇文章太困惑，我在这里开了一个新线程。

我正在尝试使用 JavaScript 从我的服务器检索 .png 文件中的确切 RGBA 值。

代码如下:

img = new Image();
img.crossOrigin = "Anonymous";
img.src = PNGsrc;
img.onload = function(){
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img,0,0);
    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
    var data = imageData.data; 
}

因此，我期望数组数据中的元素与 PNG 文件中的 RGBA 值完全相同。这段代码在台式机、笔记本电脑上运行良好。但是，在移动设备(iOS 8.4.1、Android ...)上，我没有获得 PNG 格式的原始值。

假设我在第一个像素处有 [4,0,4,255]，在第二个像素处有 [199,0,147,255]，在第三个像素处有 [199,0,147,255]。我将在 PC 上得到 data = [4, 0, 4, 255, 199, 0, 147, 255, 199, 0, 147, 255]，但 data = [150, 0, 112, 255, 158, 0, 117 , 255, 200, 0, 149, 255] 在手机上(以及 iPhone 模拟器)。

<小时/>

@凯多 我已阅读duplicated post但似乎问题有所不同。

我的图像非常大，因此加载可能需要一些时间。在 PC 上，它给了我一个 [4,0,4]，就像图像应该的那样，在 iOS 模拟器或 iPhone6 上，它仍然给了我错误的结果。

无法使用全尺寸图像版本:

jsfiddle.net/1c2q61be/3/

但是，我发现这段代码在剪切时工作正常，并且只获取图像的左上角，如以下链接所示:

jsfiddle.net/1c2q61be/4/

但是 Canvas 宽度和高度强制设置为 100,100 版本的全尺寸图像不起作用(这就是我使用 canvas.toDataURL('image/png') 获取剪切版本图像数据的方式):

jsfiddle.net/1c2q61be/5/

这可能是实际出错的部分。

非常感谢。

<小时/>

谢谢@Kaiido。这就是事情出错的地方。 我通过使用 https://github.com/devongovett/png.js/ 解决了这个问题 这样javascript就可以在没有浏览器支持的情况下解码png并且能够突破移动限制。这样，我就可以正确检索数据，而不必担心图像的大小。

问题已经解决了。我将解决方案留在这里以供将来引用。

Answer 1

谢谢@Kaiido。这就是事情出错的地方。我通过使用 https://github.com/devongovett/png.js/ 解决了这个问题这样javascript就可以在没有浏览器支持的情况下解码png并且能够突破移动限制。这样，我就可以正确检索数据，而不必担心图像的大小。

问题已经解决了。我将解决方案留在这里以供将来引用。