HTML5 视频帧捕获到位图

Posted 2023-05-07

【中文标题】HTML5 视频帧捕获到位图

【英文标题】：HTML5 video frame capture to bitmap

【发布时间】：2011-12-29 00:55:20

【问题描述】：

我得到了这个脚本：

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

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

有什么想法吗？

【问题讨论】：

何时您想将快照导出为位图吗？目前尚不清楚您希望它如何工作-何时调用shoot？单击画布时？还有什么条件？虽然我们在这里，image/jpeg 不是位图类型 - 你想要哪个？

当用户点击按钮时调用。

我想要的是能够在生成图像时通过右键单击将图像保存为jpeg或png。

【参考方案1】：

ctx.drawImage(视频, 0, 0, w, h); canvas.toDataURL(...)

toDataURL 将返回一个字符串，该字符串通常是 base64 编码的图像（文件）内容。您可以通过 将其显示在图像标签中。或者你可以使用 javascript 做任何你想做的事情......

【讨论】：

您能否验证该代码可以捕获除视频之外的所有内容吗？

我是这个画布概念的菜鸟。我不明白。

你能否传递一个不同的对象（视频除外）来查看代码是否有效。该代码应该适用于文本、图像...

那我没有给你答案。我不知道 html5 标准怎么说（它存在吗？）。现在取决于浏览器......（尝试暂停视频以查看是否有帮助）

不起作用。我会继续尝试改进解决方案。感谢您的宝贵时间。

【参考方案2】：

将其传递给 window.open

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

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

【讨论】：

忘了说你需要在服务器下运行它。见这里：html5rocks.com/en/tutorials/canvas/integrating

用链接编辑了答案。检查一下。