Vergleichen Sie mehr Teil eines Bildes durch Leinwand resemble.js mit

Question

ich verschiedenen Blöcken eines Bild (filled.png) mit einem bestimmten Block eines anderen Bildes (blank.png) zu vergleichen versuchen. Bisher habe ich versucht, dies: -

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

Aber es funktioniert nicht, bei jeder Iteration der for-Schleife gleiches Ergebnis zu erzielen. Also bitte hilf mir zu finden, wo ich falsch liege.

Answer 1

.onComplete - klingt asynchron und image2.onload definitiv - aber in der Zwischenzeit sind Sie contextResult Ändern ... asynchronen Code schlägt wieder

Wenn Sie eine Funktion erstellen, die sich selbst rekursiv aufruft, wenn jede Iteration abgeschlossen ist, sollten Sie bessere Ergebnisse haben:

zB mit minimaler Code-Änderungen zu dem, was Sie haben:

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