getImageData總是返回0

Question

我一直在試圖製作一個腳本來比較HTML5和Javascript中的兩個圖像。但出於某種奇怪的原因，它總是返回圖像完全相同。

當我們看看問題會發生什麼時，我發現每個像素的每個數據值由於某種奇怪的原因返回「0」。

那麼，有什麼想法我做錯了什麼？ :)

出於某種原因，我覺得這是非常簡單的事情，但我剛剛瞭解了畫布元素，所以是的。

這是我的代碼：

function compareImg() { 
    var c1 = document.getElementById("c"); 
    var ctx1 = c1.getContext("2d"); 
    var c2 = document.getElementById("c2"); 
    var ctx2 = c2.getContext("2d"); 

    var match = 0; 

    var img1 = new Image(); 
    img1.src = "cat.jpg"; 
    img1.onload = function() { 
     ctx1.drawImage(img1, 0, 0); 
    } 
    var img2 = new Image(); 
    img2.src = "bird.jpg"; 
    img2.onload = function() { 
     ctx2.drawImage(img2, 0, 0); 
    } 


    for(var x = 0; x<c1.width; x++) { // For each x value 
     for(var y = 0; y<c1.height; y++) { // For each y value 
      var data1 = ctx1.getImageData(x, y, 1, 1); 
      var data2 = ctx2.getImageData(x, y, 1, 1); 
      if (data1.data[0] == data2.data[0] && data1.data[1] == data2.data[1] && data1.data[2] == data2.data[2]) { 
       match++; 
      } 
     } 
    } 
    var pixels = c1.width*c1.height; 
    match = match/pixels*100; 
    document.getElementById("match").innerHTML = match + "%"; 
} 

Answer 1

在進行比較之前，您並未等到圖像加載並繪製完成。試試這個：

var img = new Image; 
img.onload = function(){ 
    ctx1.drawImage(img,0,0); 
    var img = new Image; 
    img.onload = function(){ 
    ctx2.drawImage(img,0,0); 
    // diff them here 
    }; 
    img.src = 'cat.jpg'; 
}; 
img.src = 'cat.jpg'; 

如上所示，你應該總是set your srcafter your onload。

Answer 2

我懷疑問題是，你的圖像數據可能是不準備在您嘗試使用它在畫布點。如果你的代碼推遲到onload事件處理程序，這將（可能）幫助：

var img1 = new Image(), count = 2; 
img1.src = "cat.jpg"; 
img1.onload = function() { 
    ctx1.drawImage(img1, 0, 0); 
    checkReadiness(); 
} 
var img2 = new Image(); 
img2.src = "bird.jpg"; 
img2.onload = function() { 
    ctx2.drawImage(img2, 0, 0); 
    checkReadiness(); 
} 

function checkReadiness() { 
    if (--count !== 0) return; 

    for(var x = 0; x<c1.width; x++) { // For each x value 
    for(var y = 0; y<c1.height; y++) { // For each y value 
     var data1 = ctx1.getImageData(x, y, 1, 1); 
     var data2 = ctx2.getImageData(x, y, 1, 1); 
     if (data1.data[0] == data2.data[0] && data1.data[1] == data2.data[1] && data1.data[2] == data2.data[2]) { 
      match++; 
     } 
    } 
    } 
    var pixels = c1.width*c1.height; 
    match = match/pixels*100; 
    document.getElementById("match").innerHTML = match + "%"; 
} 

我所做的只是周圍添加代碼的函數封裝。該函數檢查我添加的圖像計數變量，並且僅當它爲零時（即，僅在兩個圖像已經加載之後）才能完成這項工作。我設置了「src」屬性，我有這個想法，也許只有在過去，瀏覽器可能無法運行處理程序如果if（if）圖像已經在緩存中）。

現在另一件事：您可能應該只獲取一次圖像數據，然後迭代返回的數據。爲每個像素調用「getImageData（）」對於瀏覽器來說都是很多工作。