比較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對象內的數據時，而不是針對什麼應該是相同的副本。

這是一個比較對象的問題，還是有一些我缺少的數據來源於畫布元素的方式？

由於

來源

2012-08-01 Andrew Hall

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:07:39 Zeta

感謝您的答覆有點慢。你能提出一個比較這兩個物體的更好方法嗎？ – 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:07:47 LmC

感謝利亞姆，我已經試過這個，但我正在嘗試替代方法 – 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)

應該按預期工作，但它與大型圖像

來源

2015-07-17 07:17:07 Kerndog73

比較2 imageData對象

回答

相關問題