HTML5捕获暂停的视频流的图像并保存

HTML5 Capture image of paused video stream and save it

本文关键字：图像 保存 的视频 暂停 HTML5      更新时间：2023-09-26

我有一个html5网页，我想在上面提供一个流。到目前为止，这适用于以下HTML代码：

<video id="v" autoplay="autoplay">
    <source src="http://localhost:8080/stream.ogg" type="video/ogg">
</video>

但现在我想提供一个选项，用户可以暂停视频，并将当前看到的图片保存为服务器上的jpeg文件。

但现在我不知道如何获取图像并将其保存在服务器上的首选位置。如何将当前显示的图像保存为jpeg？

function capture() {
  var canvas = document.getElementById("c");
  var video = document.getElementById("v");
  
  if (video.paused) {
      canvas.getContext('2d').drawImage(video, 0, 0);
  }
}
<video id="v" autoplay="autoplay" >
    <source src="http://html5doctor.com/demos/video-canvas-magic/video.webm" type="video/ogg">
</video>
<input type="button" value="Capture" onclick="capture()"/>
<canvas id="c" width="500" height="500"></canvas>

在以下方面的帮助下：http://html5doctor.com/video-canvas-magic/

要将画布上的图像转换为图像文件，可以使用canvas.toDataUrl或canvas.toDataUrlHD（实验）。请参阅此处的API：https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement

相关文章：