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を変更している...非同期コードのストライキを再び

各反復が完了したときに、あなたが自分自身を再帰的に呼び出す関数を作成する場合は、あなたがすべき良い結果が得られます：

あなたが持っているものへの最小限のコード変更で：

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