比较 2 个 imageData 对象

Question

我有 2 个 imageData 对象，它们是通过相同的上下文从同一画布获取的。\n但是在比较它们时，当我认为它们应该包含相同的数据时，它们并不相等：

\n\n

var canv = document.createElement("canvas");\ncanv.setAttribute(\'width\', 300);\ncanv.setAttribute(\'height\', 300);\nvar context = canv.getContext(\'2d\');\ncontext.fillStyle = "#ff0000";\ncontext.fillRect(0, 0, 300, 300);\n\nvar imageData = context.getImageData(0, 0, 300, 300);\nvar imageData2 = context.getImageData(0, 0, 300, 300);\n\nif (imageData == imageData2) {\n    console.log("Test1: same");\n} else {\n    console.log("Test1: different");\n}\nif (imageData.data == imageData2.data) {\n    console.log("Test2: same");\n} else {\n    console.log("Test2: different");\n}\n\nif (imageData == imageData) {\n    console.log("Test3: same");\n} else {\n    console.log("Test3: different");\n}\nif (imageData.data == imageData.data) {\n    console.log("Test4: same");\n} else {\n    console.log("Test4: different");\n}\xe2\x80\x8b\n

\n\n

该代码输出：

\n\n

Test1: different\nTest2: different\nTest3: same\nTest4: same \n

\n\n

因此，在比较 imageData 对象内部的数据时，将对象与其本身进行比较可以按预期进行，但不能与应该是相同副本的数据进行比较。

\n\n

这是比较对象的问题还是我在从画布元素获取数据的方式上缺少什么？

\n\n

谢谢

\n

Answer 1

imageData.data是 a CanvasPixelArray，它是一个对象。对于两个对象 A 和 BA == B仅当它们引用同一个对象时才为 true。

由于您使用的是两个不同的imageData对象，imageData == imageData2因此imageData.data == imageData2.data即使它们的属性相同，也会评估为 false。

请注意， 的类型imageData.data 已更改为，Uint8ClampedArray基本上是Canvas Pixel ArrayBuffer。

为了检查两个图像，您必须进行基于像素的检查：

function compareImages(img1, img2) {
   if (img1.data.length != img2.data.length)
       return false;
   for (var i = 0; i < img1.data.length; ++i) {
       if (img1.data[i] != img2.data[i])
           return false;
   }
   return true;   
}

然而，可能已经有一个使用非阻塞方法的库。