0

我正在尝试将图像的不同块（fill.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 循环的每次迭代中得到相同的结果。所以请帮我找出我哪里出错了。

4

1 回答 1

0

.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();
    }
于 2016-09-28T11:08:47.407 回答