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

Question

I have a html5 webpage and on there I want to provide a stream. This works so far with the following HTML code:

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

But now I want to provide the option that the user can pause the video and save the current seen picture as jpeg file on the server.

But now I don't know how to get the image and save it a preferred location on the server. How can I save the current shown image as jpeg?

Answer 1

 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> 

With the help from: http://html5doctor.com/video-canvas-magic/

To get the image on the canvas to an image file, you can use canvas.toDataUrl or canvas.toDataUrlHD (experimental). See the API here: https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement