捕获视频帧，然后在 HTML5 中导出为位图 [英] Capturing Video Frame and then Exporting as Bitmap in HTML5

问题描述

我有一个用于播放视频的网络应用程序.

I have a web application where I play back video.

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

I am considering using the HTML5 <video> element and have determined it will allow me to meet all of my requirements except one: allowing the user to take a snapshot of the current video frame and save it as a raster image format (i.e. JPG).

对于此要求，我还没有找到解决方案，不胜感激任何有关此问题的指导.

For this requirement I have not found a solution, and any guidance on this matter would be greatly appreciated.

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

To help answer the question here are more details. I will download the video files from a server via HTTP and then play them back in the browser. This will not be a video stream, but instead a download with playback starting after the file has been received. The video will be in the MP4 format.

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

The solution only needs to run in IE 9. (Although naturally I would like the solution to be as cross-browser/platform as possible.)

推荐答案

将图像捕获到 canvas 元素:

Capture the image to a canvas element:

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() 获取图片的方法:

Then use the toDataURL() method to get the image:

canvas.toDataURL('image/jpeg');

请注意，要使所有这些都起作用视频必须与页面来自同一来源.

Be aware that for all this to work the video has to be from the same origin as the page.

这篇关于捕获视频帧，然后在 HTML5 中导出为位图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！