任何方式來比較兩個不同的位圖圖像，並檢測到JavaScript中的不同區域？

Question

我要製作一個遊戲，用戶可以檢測到兩幅圖像的不同區域。 這兩個圖像有幾個不同的區域，看起來都一樣，所以用戶應該知道。

所以我想比較兩個不同的位圖圖像並檢測不同的區域。

有人可以給我一個提示嗎？ 我必須使用畫布嗎？

我在做這個遊戲與HTML5，JavaScript的.......

Answer 1

JavaScript是不能檢查像素的圖片。 這就是爲什麼colorpickers只能在div上工作（他們會讀出背景顏色）

Answer 2

您需要以某種方式從圖像中獲取rgb值並對它們進行比較。您可以參考openCV庫來查看圖像處理是如何完成的。

或者你可以設計一個嵌入到網頁中的applet。 Java將提供類來處理RGB值。

反轉一個圖像的顏色並與其他圖像疊加。採取絕對的差異，並檢查你在哪個像素獲得差異。

Answer 3

第一各圖像繪製到畫布上

var img1 = (your first image), 
    img2 = (your second image), 
    ctx1 = document.createElement('canvas').getContext('2d'), 
    ctx2 = document.createElement('cavnas').getContext('2d'); 

ctx1.canvas.width = img1.width; 
ctx2.canvas.width = img2.width; 
ctx1.canvas.height = img1.height; 
ctx2.canvas.height = img2.height; 

ctx1.drawImage(img1, 0, 0); 
ctx2.drawImage(img2, 0, 0); 

然後得到的圖像數據對每個IMG

var data1 = ctx1.getImageData(0, 0, img1.width, img1.height); 
var data2 = ctx2.getImageData(0, 0, img2.width, img2.height); 

，最後比較（這假定IMG1和IMG2是相同的尺寸）

var different = []; 

for (var y=0; y<img1.height; y++){ 
    for (var x=0; x<img1.width; i++){ 
     var pos = (x * 4) + (y * (img.width * 4)); 
     for (var i=0; i<4; i++){ 
      if (data1[pos + i] != data2[pos + i]){ 
       different.push({x: x, y: y}); 
      } 
     } 
    } 
} 

這將給你一個所有像素不同的x，y座標數組兩個圖像。