如何從視頻裁剪畫布並保存爲圖像？

Question

如何從視頻裁剪畫布並保存爲圖像？ 即時通訊使用此

function capture(){ 
var canvas = document.getElementById('canvas'); 
var video = document.getElementById('video'); 
canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight); } 

和HTML是

<v ideo id="video" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" controls></video><br/> 

<button onclick="capture()">Capture</button> <br/><br/> 
<canvas class="input" id="canvas"></canvas> <br/><br/> 

它得到一個形象的畫布。但現在如何保存爲圖像？我試着用Filesaver.js ，但我不知道如何保存爲圖像從畫布與此代碼。

var canvas = document.getElementById("my-canvas"), ctx == canvas.getContext("2d"); 
// draw to canvas... 
canvas.toBlob(function(blob) { 
saveAs(blob, "pretty image.png"); 
}); 

Answer 1

寫在下載的單擊事件下面的代碼：

this.href = canvas.toDataURL('image/jpeg'); 
this.download = 'pretty_image.jpeg';