html 页面增加:可以选择显示或者隐藏,主要用于显示截取的图片
1 |
<canvas style="display: none"></canvas> |
截屏:主要是利用canvas获取图片的base64,给按钮绑定点击事件drawImage(val),参数为获取到的video
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
//截屏 function drawImage(val) { var video=document.getElementById(val); var canvas=window.canvas=document.querySelector('canvas'); canvas.width=480; canvas.height=360; canvas.width=video.videoWidth; canvas.height=video.videoHeight; canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height); var _imgSrc = canvas.toDataURL("image/jpeg"); saveFile(_imgSrc); } function saveFile(strData) { setTimeout(function() { var filename = 'tuterm_' + (new Date()).getTime() + '.jpg'; // strData = strData.replace('image/jpeg', 'image/octet-stream'); downloadFile(filename,strData); }, 1000); } //下载 function downloadFile(fileName,content){ let aLink = document.createElement('a'); let blob = this.base64ToBlob(content); //new Blob([content]); let evt = document.createEvent("HTMLEvents"); evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为 aLink.download = fileName; aLink.href = URL.createObjectURL(blob); aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐 } //base64转blob function base64ToBlob(code) { let parts = code.split(';base64,'); let contentType = parts[0].split(':')[1]; let raw = window.atob(parts[1]); let rawLength = raw.length; let uInt8Array = new Uint8Array(rawLength); for (let i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], {type: contentType}); } |