html - 捕获视频帧然后在 HTML5 中导出为位图

Question

我有一个可以播放视频的网络应用程序。

我正在考虑使用 HTML5 <video>元素并确定它将允许我满足我的所有要求，除了一个:允许用户拍摄当前视频帧的快照并将其保存为光栅图像格式(即 JPG)。

对于这个要求，我还没有找到解决方案，非常感谢任何关于此事的指导。

为了帮助回答这个问题，这里提供了更多详细信息。我将通过 HTTP 从服务器下载视频文件，然后在浏览器中播放它们。这将不是视频流，而是在收到文件后开始播放的下载。视频将采用 MP4 格式。

该解决方案只需要在 IE 9 中运行。(尽管我自然希望该解决方案尽可能跨浏览器/平台。)

Answer 1

将图像捕获到 canvas 元素:

var video  = document.getElementById(videoId);
var canvas = document.createElement('canvas');
canvas.width  = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0);

然后使用 toDataURL()获取图片的方法:

canvas.toDataURL('image/jpeg');

请注意，所有这些都可以正常工作 the video has to be from the same origin as the page .