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]，但数据= [150,0,112,255,158,0,117] ，255,200,0,149,255]在手机上（iPhone模拟器也是如此）。

@Kaiido 我已阅读duplicated post，但似乎问题不同。

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

无法使用完整尺寸的图片版本：

jsfiddle.net/1c2q61be/3 /

但是，我发现这个代码在剪切时只能正常工作，只占用图像的左上角，如下面的链接所示：

jsfiddle.net/1c2q61be/4 /

但是将画布宽度和高度强制设置为100,100版本的全尺寸图像无法正常工作（这是我使用canvas.toDataURL（＆＃39; image / png＆＃39;）获取剪切版图像数据的方法）：

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时，在移动设备上获取大图像的错误数据

1 个答案: