前台JS 实现截图保存功能

电气视频项目-视频截图

以下是重点代码：

//变量声明
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);
}