当使用getImageData时，在移动设备上获得大图像的不正确数据

Getting incorrect data for large images on mobile when using getImageData

本文关键字：图像 数据 不正确 getImageData 移动      更新时间：2023-09-26

由于上一篇帖子太乱了，我在这里开了一个新的帖子。

我正在尝试使用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]，在第二个像素处有[1990,147,255]，在第三个像素处有[199,0,147,255]。我将在PC上得到data =[4,0,4,255, 199, 0,147, 255, 199, 0,147, 255]，但在手机上(iPhone模拟器也是如此)得到data =[150, 0,112, 255, 158, 0,117, 255, 200, 0,149, 255]。

@Kaiido我已经通读了重复的帖子，但似乎问题是不同的。

我的图像相当大，所以它可能需要一些时间来加载。在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进行解码，并且能够跨越移动设备的限制。通过这种方式，我可以正确地检索我的数据，而不用担心图像的大小。

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

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

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

相关文章：