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

Question

由于上次post太乱了，这里开新帖了

我正在尝试使用 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 上获得数据 = [4, 0, 4, 255, 199, 0, 147, 255, 199, 0, 147, 255]，但数据 = [150, 0, 112, 255, 158, 0, 117 , 255, 200, 0, 149, 255] 在手机上（iPhone 模拟器）。

@凯伊多我已通读但问题似乎有所不同。

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

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

jsfiddle.net/1c2q61be/3/

然而，我发现这段代码在我剪切时可以正常工作，只截取图像的左上角，如下图link:

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，并且能够超越移动限制。这样，我就可以正确地检索我的数据，而不必担心图像的大小。

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

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

Getting incorrect data for large images on mobile when using getImageData

javascript

android

canvas

getimagedata

ios