Video 如何从视频中裁剪画布并另存为图像？

如何从视频中裁剪画布并另存为图像？ 我在用这个

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/>

下载点击事件时编写以下代码：

去灰化。。。感谢您在修订版2中“窃取”我（已批准）的建议编辑。。。您执行了它们的回滚（在修订版3中），然后在修订版4中编辑了您的答案。。。通过重用我建议的95%的编辑。。。这不好，这也是为什么我标记了你的答案。。。我能拿回我的“+2”代表积分吗？@Bhargav的附言：谢谢你的重新回滚，可惜它没有再次返回+2。。。哦，好吧，就这样吧。。。

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

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