比较2 imageData对象

问题描述：

我有2个imageData对象，我通过相同的上下文从同一个画布获得。但对比它们时，它们不相等时，我会认为他们会像它们应该包含相同的数据：比较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对象内的数据时，而不是针对什么应该是相同的副本。

这是一个比较对象的问题，还是有一些我缺少的数据来源于画布元素的方式？

由于

答

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; 
}

但是，有可能是已经它采用无阻塞方法库。

感谢您的答复有点慢。你能提出一个比较这两个物体的更好方法吗？ – 2012-08-01 08:09:22

发布了我能想到的最微不足道的解决方案 - 它不会很快，但它应该可以工作。也许有一些这样的库。 – Zeta 2012-08-01 08:15:57

答

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/

我已经用于检测重复的图片，也许这就是你想要的？

感谢利亚姆，我已经试过这个，但我正在尝试替代方法 – 2012-08-01 08:08:49

好吧，我会高度推荐这种方式 – LmC 2012-08-01 08:09:16

请参阅我的编辑。 – LmC 2012-08-01 08:11:22

答

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

应该按预期工作，但它与大型图像

比较2 imageData对象

相关推荐