浏览器截图方案分析页面截图是前端经常遇到的一个需求，比如页面生成海报，弹窗图片分享等，下面是我整理的三种截图方案：html2canvasdom-to-imagewebRTChtml2canvashtml2canvas使用范围很广的前端截图方案，先把DOM一张张转成Canvas再导出图片（使用canvas自带的toDataUrl、toBobl）。使用起来应该是比较兼容的方案，可以解决大部分需求，但是也有一些小问题，比如：图片跨域，CSS属性开启，canvas元素导出透明色.大部分问题还是可以通过配置和百度解决的为白色边框，不设置背景为透明色(null)allowTaint:true,useCORS:true,//支持图片跨域scale:1,//设置缩放比例}).then((canvas)=>{//截图使用img元素显示在页面上letimg=newImage();img.src=canvas.toDataURL("image/jpg");//toDataURL:将图片格式转为base64//直接下载让a=document.createElement("a");a.href=canvas.toDataURL("image/jpeg");a.download="test";a.click();}).catch((err)=>{console.log("html2canvaserr",err);});};dom-to-image使用svg，通过createObjectURL或者encodeURIComponent处理svg得到图片资源，可以将svg绘制到canvas上。dom-to-image-more是dom-to-image的升级版，将HTMl放在SVG中，然后创建一个以SVG为源的Image元素，但也存在一些问题如：外部资源（js，css）,imgurl等),svg不支持js的执行,需要处理,不能完全还原constgetDomImg=(eleId)=>{domtoimage.toPng(document.getElementById(eleId)).然后(function(dataUrl){leta=document.createElement("a");a.href=dataUrl;a.download="test";a.click();}).catch(function(error){console.error("Failedtogenerate",error);});};webRTC使用浏览器的原生API——webERT中的getDisplayMedia可以以录屏的形式从窗口中的资源中取出一帧，但是需要用户授权和一些窗口选择，相比前两种方案不能默认截图。但是好处也很明显，就是不会出现样式乱、图片跨域等问题。因为使用了原生浏览器的方式，基本上用户看到的就是截图的样子，1:1还原。functiongetDomImg(videoId:string){constvideoElem:any=document.getElementById(videoId);constdisplayMediaOptions={audio:false,video:{width:window.screen.width,height:window.screen.height},//cursor:"always"};navigator.mediaDevices.getDisplayMedia(displayMediaOptions).then((stream)=>{videoElem.srcObject=stream;setTimeout(()=>{varcanvas=document.createElement("canvas");canvas.width=videoElem.clientWidth;canvas.height=videoElem.clientHeight;canvas.getContext("2d").drawImage(videoElem,0,0,window.screen.width,window.screen.height,0,0,画布宽度,画布高度);vardataURL=canvas.toDataURL("image/webp");让a=document.createElement("a");a.href=dataURL;a.download="测试";.click();让tracks=videoElem.srcObject.getTracks();tracks.forEach((track)=>track.stop());videoElem.srcObject=null;},200);}).finally(()=>{});}需要在代码中放一个Video标签
