1

私は使用してスクリーンショットを撮っているhtml5ビデオを持っています:

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

これにより、キャンバスにスクリーンショットがうまく描画されます。ただし、私がやろうとしているのは、複数のキャンバスで複数のスクリーンショットを撮り、 Resemble.jsを使用してそれらを比較することです。

Resemble.js には 2 つのファイルが必要です。キャンバスからこれらのファイルを取得するために 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() です。キャンバスからは何も生成されません。この問題の原因は何ですか? そして、私は自分のアプローチで正しい軌道に乗っていますか?

4

1 に答える 1

2

両方のイメージをロードする時間を与えます。

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

    }

}
于 2014-03-09T21:47:39.900 に答える