使用resemble.js比較圖像的多個部分通過畫布

Question

我想比較圖像（filled.png）的不同塊與另一個圖像（blank.png）的特定塊。 到目前爲止，我已經試過這樣： -

var canvas = document.createElement('canvas'); 
var context = canvas.getContext('2d'); 
canvas.width = 20; 
canvas.height = 20; 
var img = new Image(); 
    img.onload = function(){ 
    context.drawImage(img,53,61,20,20,0,0,20,20); 
}; 
img.src ='blank.png'; 
var imgResult = new Image(); 
var image1,image2; 
var canvasResult = document.createElement('canvas'); 
canvasResult.width = 20; 
canvasResult.height = 20; 
var contextResult = canvasResult.getContext('2d'); 

function compare(){ 
    image1=new Image(); 
    image1.onload= function(){ 
     imgResult.onload = function(){ 
      var x = 53; 
      for (var i = 1; i <= 20; i++) { 
       contextResult.clearRect(0, 0, 20, 20); 
       contextResult.drawImage(imgResult,x,61,20,20,0,0,20,20); 
       x += 23; 
       image2 = new Image(); 
       image2.onload = function(){ 
        resemble(image1.src).compareTo(image2.src).onComplete(function(data){ 
         $('p').append('Diffrence : ' + data.misMatchPercentage+ '%</br>'); 
        }); 
       }; 
       image2.src = canvasResult.toDataURL(); 
      } 
     }; 
    imgResult.src = 'filled.png'; 
    } 
    image1.src=canvas.toDataURL(); 
} 

但它不工作，在for循環每次迭代得到同樣的結果。所以請幫我看看，我哪裏出錯了。

Answer 1

.onComplete - 聽起來異步的，image2.onload絕對是 - 但在此期間你改變contextResult ...異步代碼罷工再次

如果你把每一次迭代完成時創造出遞歸調用自身的函數，你應該有更好的結果：

eg只需對代碼進行最少的更改即可：

imgResult.onload = function(){ 
     var x = 53, i = 1; 
     var compare = function() { 
      contextResult.clearRect(0, 0, 20, 20); 
      contextResult.drawImage(imgResult,x,61,20,20,0,0,20,20); 
      x += 23; 
      image2 = new Image(); 
      image2.onload = function(){ 
       resemble(image1.src).compareTo(image2.src).onComplete(function (data) { 
        $('p').append('Diffrence : ' + data.misMatchPercentage+ '%</br>'); 
        i += 1; 
        if (i <= 20) { 
         compare(); 
        } 
       }); 
      }; 
      image2.src = canvasResult.toDataURL(); 
     }; 
     compare(); 
    }