比较两个imageData对象

Question

比较两个imageData对象

3

我有两个 imageData 对象，它们通过相同的上下文从相同的画布获取。但是当比较它们时，它们并不相等，尽管它们应该包含相同的数据：

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对象内部数据时可以按预期运行，但是不能与应该是相同副本的内容进行比较。

这是否是比较对象时存在的问题？或者我在从画布元素中获取数据方面漏掉了什么？

谢谢。

- Andrew Hall

3个回答

2

如何使用JavaScript将图像转换为base64字符串

阅读有关将图像转换为base64的问题，

你可以将它转换为base64字符串并比较这些字符串吗？

试试这里：http://www.webresourcesdepot.com/pixel-by-pixel-image-comparison-with-im-js/

http://tcorral.github.com/IM.js/

我用它来检测重复的图像，也许这就是你要找的东西？

- Lemex

谢谢Liam，我已经尝试过这个方法了，但我正在尝试其他的方法。 - Andrew Hall

好的，我强烈推荐这种方式。 - Lemex

3个链接中有2个已经失效。 - Riki_tiki_tavi

0

JSON.stringify(imageData) == JSON.stringify(imageData2)

应该按预期工作，但在处理大型图像时速度有点慢

- Indiana Kernick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zeta · Accepted Answer

imageData.data 是一个对象，类型为 CanvasPixelArray。对于两个对象 A 和 B，只有当它们引用同一个对象时，A == B 才会返回 true。

由于您正在使用两个不同的 imageData 对象，因此无论其属性相同与否，imageData == imageData2 和 imageData.data == imageData2.data 都将返回 false。

请注意，imageData.data 的类型已经被更改为 Uint8ClampedArray，它基本上是一个 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;   
}

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