前台JS 实现截图保存功能

[html] view plain copy

print?

1. //变量声明  
2. var video = document.getElementById('video_1');  
3. var canvas = document.getElementById('canvas_1');  
4. var ctx = canvas.getContext('2d');  
5. var width = 800;  
6. var height = 600;  
7.   
8. canvas.width = width;  
9. canvas.height = height;  

[html] view plain copy

print?

1. //截图单击事件  
2. ctx.drawImage(video, 0, 0, width, height);  // 将video中的数据绘制到canvas里  
3. saveImage(canvas, 'screen_' + new Date().getTime() + '.png');  // 存储图片到本地  

[html] view plain copy

print?

1. function saveImage (canvas, filename) {  
2.   //alert(canvas.toDataURL());  
3.     var image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');  
4.   
5.     saveFile(image, filename || 'file_' + new Date().getTime() + '.png');  
6. }  

[html] view plain copy

print?

1. function saveFile(data, filename) {  
2.     var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');  
3.     save_link.href = data;  
4.     save_link.download = filename;  
5.   
6.     var event = document.createEvent('MouseEvents');  
7.     event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  
8.     save_link.dispatchEvent(event);  
9. }