Canvas & Resemble.js: toDataURL() 不工作

Question

我有一个 html5 视频，我正在使用它截取屏幕截图：

context.drawImage(video, 0, 0, w, h);

这可以很好地在画布上绘制屏幕截图。但是，我想做的是在多个画布上截取多个屏幕截图，并使用Resemble.js 将它们相互比较。

Resemble.js 需要两个文件，我正在尝试使用 toDataURL() 从画布中获取这些文件。

var image1 = new Image();
        image1.id = "pic"
        image1.src = canvas1.toDataURL("image/png");

然后将图像插入到like中：

resemble(image1).compareTo(image2).onComplete(function(){
            //return data;
            alert(data);
        /*
        {
          misMatchPercentage : 100, // %
          isSameDimensions: true, // or false
          getImageDataUrl: function(){}
        }
        */
            });

这对我来说似乎失败的地方是 toDataURL()。它不会从画布上产生任何东西。是什么导致了这个问题？我的方法是否正确？

Answer 1

给两张图片加载时间：

var loadCount;
var image1,image2;

function compare(){

    // variable to count how many images have fully loaded

    loadCount=0;

    // convert canvas1 to an image
    // call startComparing when done

    image1=new Image();
    image1.onload=startComparing;
    image1.src=canvas1.toDataURL();

    // convert canvas2 to an image
    // call startComparing when done

    image2=new Image();
    image2.onload=startComparing;
    image2.src=canvas2.toDataURL();

}


function startComparing(image1,image2){

    // do the comparison only if we've loaded both images (loadCount==2)

    if(++loadCount==2);

        resemble(image1).compareTo(image2).onComplete(function(data){
            alert(data);
        });

    }

}