使用html2canvas实现浏览器截图必须在服务器环境下实现。函数html2canvas可以通过纯JS对浏览器进行截图，但是截图的精度有待提高，部分css无法识别，所以无法在canvashidden中完美呈现原图样式*/.book_inf{位置：相对的;溢出：隐藏；文本溢出：省略号；显示：-webkit-box；-webkit-line-clamp:2;-webkit-box-orient：垂直；}支持浏览Firefox3.5+GoogleChromeOpera12+IE9+Safari6+基本语法/*参数：*#screenshots需要截图的元素id，截图后要执行的功能，*backgroundColor配置项的背景色*canvas是截图后最后返回的Acanvas*/functionscreenshotsImg(){html2canvas(document.querySelector("#screenshots"),{backgroundColor:'transparent',//设置背景透明}).then(canvas=>{canvasTurnImg(canvas)//保存图片格式转换方法});}可用配置项参数名称类型默认值说明allowTaintbooleanfalse是否允许跨域图片污染画布---allowcross-domainbackgroundstring#fffCanvas背景颜色，如果DOM中没有指定。为透明设置未定义---画布背景颜色，如果这里没有设置默认的白色，所以我改成了backgroundColor，可以用heightnumbernull定义画布的heigt，单位为像素。如果为空，则以窗口的全高呈现。---画布高度设置letterRenderingbooleanfalse是否单独呈现每个字母。如果使用字母间距，则为必需。---有用的日志记录布尔值false是否在控制台记录事件。---将console.log()proxystringundefinedUrl中的信息输出到用于加载跨源图像的代理。如果留空，则不会加载跨源图像。---代理地址taintTestbooleantrue是否在绘制之前测试每个图像是否污染画布---是否在渲染之前测试图像timeoutnumber0加载图像的超时时间，以毫秒为单位。设置为0将不会超时。---图片加载延迟，默认延迟为0，单位为毫秒widthnumbernull定义画布的宽度，单位为像素。如果为空，则以窗口的全宽呈现。---画布宽度使用CORSbooleanfalse是否尝试加载跨源图像作为CORS服务，然后再恢复为代理--跨域代理设置图像格式1.直接从画布中提取图像元数据//将图像导出为png格式vartype='png';varimgData=canvas.toDataURL(类型);2.将mime-type改为image/octet-stream，强制让浏览器直接下载/***获取mimeType*@param{String}typetheoldmime-type*@returnthenewmime-type*/var_fixType=function(type){type=type.toLowerCase().replace(/jpg/i,'jpeg');varr=type.match(/png|jpeg|bmp|gif/)[0];返回'??图像/'+r;};//处理图片数据，替换mimetypeimgData=imgData.replace(_fixType(type),'image/octet-stream');3.下载图片到本地/***保存文件到本地*@param{String}data要保存到本地的图片数据*@param{String}filename文件名*/varsaveFile=function(data,filename){varsave_link=document.createElementNS('http://www.w3.org/1999/xhtml','a');保存链接。href=数据；save_link.download=文件名；varevent=document.createEvent('MouseEvents');event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);保存链接.dispatchEvent（事件）；}；//下载的文件名varfilename='baidufe_'+(newDate()).getTime()+'.'+类型；//下载保存文件（imgData，文件名）；4.避免坑1.#screenshots必须设置宽高，否则无法生成imgData。2.即使在vue中mounted使用了nextTick，也无法保证CSS已经渲染完毕，导致生成的canvas不是你设置的宽高。mounted:function(){this.$nextTick(function(){that.screenshotsImg()})}改为mounted:function(){setTimeout(function(){screenshotsImg()},20)}案例参考html2canvashtml2canvasHow使用js将画布保存为图片文件，并且可以自定义文件名
