比较 2 个 imageData 对象答案

【问题标题】：Comparing 2 imageData objects比较 2 个 imageData 对象
【发布时间】：2012-08-01 08:00:07
【问题描述】：

我有 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 对象中的数据时，将对象与其自身进行比较可以正常工作，但不能与应该是相同副本的数据进行比较。

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

谢谢

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

imageData.data 是一个CanvasPixelArray，它是一个对象。对于两个对象 A 和 B，A == B 只有在它们引用同一个对象时才会为真。

由于您使用两个不同的 imageData 对象，imageData == imageData2 和 imageData.data == imageData2.data 的计算结果都为 false，即使它们的属性相同。

注意imageData.datahas been changed to Uint8ClampedArray的类型，即basically一个画布像素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;   
}

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

【讨论】：

感谢您的回复。你能建议一个更好的方法来比较这两个对象吗？
发布了我能想到的最简单的解决方案 - 它不会很快，但它应该可以工作。也许有一些图书馆可以做到这一点。

【解决方案2】：

How to convert image into base64 string using javascript

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

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

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

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

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

【讨论】：

谢谢利亚姆，我已经尝试过了，但我正在尝试其他方法
好的，我强烈推荐这种方式

【解决方案3】：

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

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

【讨论】：