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

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

有什么想法？

- Alejandro Ar

---

你想在什么时候将快照导出为位图？目前还不清楚你希望它如何工作——是在调用“shoot”时？还是在单击画布时？或者其他某些条件下？顺便提一下，“image/jpeg”不是位图类型，你需要哪种类型的位图？ - Aaron Dufour

当用户点击按钮时，它被调用。 - Alejandro Ar

我想要的是在生成图像时，通过右键单击将图像保存为jpeg或png格式。 - Alejandro Ar

Answer 1

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

canvas.toDataURL(...)会返回一个字符串，通常是base64编码的图像（文件）内容。你可以通过 <img src="the string"/> 将其显示在图像标签中。或者你可以使用JavaScript来进行其他操作...

- Tom Fishman

---

你能验证一下代码是否可以捕获除视频以外的所有内容吗？ - Tom Fishman

我在画布概念方面有点新手，我不太理解。 - Alejandro Ar

你能传递一个不同于视频的对象来测试代码是否有效吗？代码应该适用于文本、图像等。 - Tom Fishman

那我就无法回答你了。我不知道HTML5标准（如果有的话）对此有何规定。现在这取决于浏览器...（尝试暂停视频看看是否有帮助） - Tom Fishman

不起作用。我会继续尝试改进解决方案。谢谢你的时间。 - Alejandro Ar

Answer 2

将其传递给 window.open

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

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

- pradeek

---

忘了提到需要在服务器上运行此代码。请参见：http://www.html5rocks.com/en/tutorials/canvas/integrating/ - pradeek

已编辑答案并附上链接。请查看。 - pradeek