我得到了这个脚本:
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]);
}
}
我想做的是将快照导出为位图图像。我读到我可以使用这一行:
canvas.toDataURL('image/jpeg');
但我不知道在哪里添加它。
有什么想法吗?
最佳答案
ctx.drawImage(视频, 0, 0, w, h); canvas.toDataURL(...)
toDataURL 将返回一个字符串,该字符串通常是 base64 编码的图像(文件)内容。你可以通过 在图像标签中显示它。或者你可以使用 javascript 做任何你想做的事......
关于javascript - HTML5 视频帧捕获到位图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8128571/