Question

我有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对象内部的数据时，但不应该反对应该是相同的副本。

这是比较对象的问题，还是我从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画布像素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;   
}

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

Answer 2

How to convert image into base64 string using javascript

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

是否可以将其转换为基本的64个字符串并比较字符串？

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

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

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

Answer 3

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

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

比较2个imageData对象

3 个答案: