捕获视频帧然后导出为 HTML5 中的位图

Question

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

我正在考虑使用 HTML5 元素，并确定它可以满足我的所有要求，除了以下一项：允许用户拍摄当前视频帧的快照，并且将其保存为光栅图像格式（即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');

请注意，要使所有这些工作视频必须来自同一视频原点为页面。