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

问题描述

我正在考虑使用HTML5 < video> 允许用户拍摄当前视频帧的快照并将其保存为光栅图像格式（即JPG）。

对于这个需求，我还没有找到解决方案，任何关于此问题的指导都将不胜感激。

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

该解决方案只需要在IE 9中运行。（尽管我当然希望解决方案）

解决方案

将图片捕获到 canvas

code>元素：

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

请注意，对于所有这些工作视频必须来自与页面相同的来源。

I have a web application where I play back video.

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.

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.

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

解决方案

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

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屋！