比较2个imageData对象 [英] Comparing 2 imageData objects

问题描述

我有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：不同的
 Test2：不同的
 Test3：相同的
 Test4：相同的
  

因此，将对象与自身进行比较可以按预期进行，并且在比较imageData对象内部的数据时也可以进行预期的工作，而不是与应为同一副本的对象进行比较。

比较对象是个问题吗？还是从canvas元素中获取数据的方式缺少我的东西？

谢谢

解决方案

imageData.data 是 CanvasPixelArray ，它是一个对象。对于两个对象A和B A == B 仅在引用相同的对象时为true。

您正在使用两个不同的 imageData 对象 imageData == imageData2 和 imageData.data = = imageData2.data 即使它们的属性相同也将计算为false。

请注意，的类型imageData.data 已更改为 Uint8ClampedArray ，它是基本画布像素 ArrayBuffer 。

要检查两个图像，您必须进行基于像素的检查：

  function compareImages（img1，img2）{
 if（img1.data.length！= img2.data.length）
返回false； 
 for（var i = 0; i< img1.data.length; ++ i）{
 if（img1.data [i]！= img2.data [i]）
返回false； 
} 
返回true； 
} 
  

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

I have 2 imageData objects which I get from the same canvas through the same context. But when comparing them, they are not equal when I would think they would be as they should contain the same data:

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");
}​

This code outputs:

Test1: different
Test2: different
Test3: same
Test4: same 

So comparing the object to itself works as expected and when comparing the data inside the imageData object, but not against what should be an identical copy.

Is this an issue with comparing objects or is there something I am missing with the way the data is being sourced from the canvas element?

Thanks

解决方案

imageData.data is a CanvasPixelArray, which is an object. For two objects A and B A == B will only be true if they reference the same object.

Since you're using two different imageData objects both imageData == imageData2 and imageData.data == imageData2.data will evaluate to false, even if their properties are the same.

Note that the type of imageData.data has been changed to Uint8ClampedArray, which is basically a Canvas Pixel ArrayBuffer.

In order to check two Images you would have to do a pixel-based check:

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

However, there could be already a library which uses non-blocking methods.

这篇关于比较2个imageData对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！