[英]HTML5 video frame capture to bitmap
I got this script: 我有这个脚本:
function capture(video, scaleFactor) {
if(scaleFactor == null){
scaleFactor = 1;
}
var w = video.videoWidth * scaleFactor;
var h = video.videoHeight * scaleFactor;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
return canvas;
}
function shoot(){
var video = document.getElementById(videoId);
var output = document.getElementById('output');
var canvas = capture(video, scaleFactor);
canvas.onclick = function(){
window.open(this.toDataURL());
};
snapshots.unshift(canvas);
output.innerHTML = '';
for(var i=0; i<1; i++){
output.appendChild(snapshots[i]);
}
}
What I want to do is export the snapshot to a bitmap image. 我想要做的是将快照导出到位图图像。 I read that I could use this line:
我读到我可以使用这一行:
canvas.toDataURL('image/jpeg');
But I don't know where to add it. 但我不知道在哪里添加它。
Any ideas? 有任何想法吗?
ctx.drawImage(video, 0, 0, w, h); ctx.drawImage(视频,0,0,w,h); canvas.toDataURL(...)
canvas.toDataURL(...)
toDataURL will return you a string which is usually base64 encoded image (file) content. toDataURL将返回一个字符串,通常是base64编码的图像(文件)内容。 You can display it in image tag by < img src="the string"/>.
您可以通过<img src =“字符串”/>在图像标记中显示它。 Or you can use javascript to do whatever you want...
或者您可以使用javascript做任何你想做的事情......
Pass it to window.open 将它传递给window.open
canvas.onclick = function () {
window.open(canvas.toDataURL('image/png'));
};
Full Example : http://www.nihilogic.dk/labs/canvas2image/ 完整示例: http : //www.nihilogic.dk/labs/canvas2image/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.