電氣視訊專案-視訊截圖

//變數宣告
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);
}