javascript - 比较 2 个 imageData 对象

Question

我有 2 个 imageData 对象，它们是通过相同的上下文从相同的 Canvas 中获取的。 但是当比较它们时，当我认为它们应该包含相同的数据时它们并不相等:

var canv = document.createElement("canvas");
canv.setAttribute('width', 300);
canv.setAttribute('height', 300);
var context = canv.getContext('2d');
context.fillStyle = "#ff0000";
context.fillRect(0, 0, 300, 300);

var imageData = context.getImageData(0, 0, 300, 300);
var imageData2 = context.getImageData(0, 0, 300, 300);

if (imageData == imageData2) {
    console.log("Test1: same");
} else {
    console.log("Test1: different");
}
if (imageData.data == imageData2.data) {
    console.log("Test2: same");
} else {
    console.log("Test2: different");
}

if (imageData == imageData) {
    console.log("Test3: same");
} else {
    console.log("Test3: different");
}
if (imageData.data == imageData.data) {
    console.log("Test4: same");
} else {
    console.log("Test4: different");
}​

这段代码输出:

Test1: different
Test2: different
Test3: same
Test4: same 

因此，在比较 imageData 对象内部的数据时，将对象与自身进行比较会按预期工作，但不会与应该是相同副本的内容进行比较。

这是比较对象的问题还是我从 canvas 元素获取数据的方式遗漏了什么？

谢谢

Answer 1

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

由于您正在使用两个不同的 imageData 对象，因此 imageData == imageData2 和 imageData.data == imageData2.data 将计算为false，即使它们的属性相同。

注意 imageData.data 的类型 has been changed to Uint8ClampedArray ，即 basically Canvas 像素 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;   
}

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