HTML5視頻幀捕獲到位圖

Question

我有這個腳本：

function capture(video, scaleFactor) {
    if(scaleFactor == null){
        scaleFactor = 1;
    }
    var w = video.videoWidth * scaleFactor;
    var h = video.videoHeight * scaleFactor;
    var canvas = document.createElement('canvas');
    canvas.width  = w;
    canvas.height = h;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, w, h);


    return canvas;
} 


function shoot(){
    var video  = document.getElementById(videoId);
    var output = document.getElementById('output');
    var canvas = capture(video, scaleFactor);
    canvas.onclick = function(){
        window.open(this.toDataURL());
    };
    snapshots.unshift(canvas);
    output.innerHTML = '';
    for(var i=0; i<1; i++){
        output.appendChild(snapshots[i]);
    }

}

我想要做的是將快照導出到位圖圖像。 我讀到我可以使用這一行：

canvas.toDataURL('image/jpeg');

但我不知道在哪里添加它。

有任何想法嗎？

Answer 1

ctx.drawImage（視頻，0,0，w，h）; canvas.toDataURL（...）

toDataURL將返回一個字符串，通常是base64編碼的圖像（文件）內容。 您可以通過<img src =“字符串”/>在圖像標記中顯示它。 或者您可以使用javascript做任何你想做的事情......

Answer 2

將它傳遞給window.open

canvas.onclick = function () {
    window.open(canvas.toDataURL('image/png'));
};

完整示例： http ： //www.nihilogic.dk/labs/canvas2image/