3

我有 2 个 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 对象内的数据时，而不是与应该是相同副本的数据进行比较。

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

谢谢

4

3 回答 3

4

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

由于您同时使用两个不同的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;   
}

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

于 2012-08-01T08:07:39.310 回答
2

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

阅读这个关于将图像转换为 base64 的问题，

让您可以将其转换为 base 64 字符串并比较字符串吗？

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

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

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

于 2012-08-01T08:07:47.890 回答
1 
JSON.stringify(imageData) == JSON.stringify(imageData2)

应该可以按预期工作，但是对于大图像来说有点慢

于 2015-07-17T07:17:07.100 回答