电气视频项目-视频截图
以下是重点代码:
//变量声明 var video = document.getElementById('video_1'); var canvas = document.getElementById('canvas_1'); var ctx = canvas.getContext('2d'); var width = 800; var height = 600; canvas.width = width; canvas.height = height;
//截图单击事件
ctx.drawImage(video, 0, 0, width, height); // 将video中的数据绘制到canvas里
saveImage(canvas, 'screen_' + new Date().getTime() + '.png'); // 存储图片到本地
function saveImage (canvas, filename) {
//alert(canvas.toDataURL());
var image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
saveFile(image, filename || 'file_' + new Date().getTime() + '.png');
}
function saveFile(data, filename) { var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); save_link.href = data; save_link.download = filename; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(event); }