使用 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/

但是画布宽度和高度被强制设置为 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 并能够超越移动限制。这样，我就可以正确检索我的数据，而不必担心图像的大小。

问题解决了。我将把解决方案留在这里以供将来参考。