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");

然后将图像插入类似：

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

    }

}

画布＆amp; Resemble.js：toDataURL（）不工作

1 个答案: