1、HTML2CanvasHtml2canvas允许您在用户的浏览器上直接截取网页或部分网页的“屏幕截图”。截图基于DOM，脚本遍历加载页面的DOM，收集目标节点的所有元素信息，然后用于构建页面的表示。也就是说，它并没有真正抓取页面，而是根据从DOM中读取到的属性来构建页面的呈现，因此并不能保证100%还原原图。官方文档：http://html2canvas.hertzen.com/documentation2，使用方法html2canvas(element).then(canvas=>{//canvas是转换后的Canvas对象letoImg=newImage();oImg.src=canvas.toDataURL();//返回base64数据图片url数据，可以在toDataURL()中添加参数设置图片格式，默认为pngdocument.body.appendChild(oImg);//将生成的图片添加到body中})3.常见问题及解决方法#####1\.图像模糊问题问题：有时我们发现导出的图像的某些部分不如原始图像清晰。解决方案一：可能因为目标节点使用的背景图，建议使用![]()
标签，而不是背景图样式解决方案二：如果还是模糊，可以先放大画布，再缩放生成的图像按比例变化varwidth\=element.offsetWidth;varheight\=element.offsetHeight;varcanvas\=document.createElement(“canvas”);var比例\=2;canvas.width\=width\*scale;//放大画布canvas.height\=height\*scale;//放大画布canvas.getContext("2d").scale(scale,scale);//二维绘图，将画布的横坐标和纵坐标放大2倍。varopts\={scale:scale,canvas:canvas,width:width,height:height}html2canvas(element,opts).then(canvas\=>{vardataUrl\=canvas.toDataUrl();//生成图片base64格式urlvarnewImg\=document.createElement(“img”);//创建img元素newImg.src\=dataUrl;//为img元素分配路径newImg.style.widht\=canvas.width/scale+'px';//按比例缩放生成图片宽度newImg.style.height\=canvas.height/scale+'px';//等待非缩放生成图片高度})方案三：另一种方法是添加配置html2canvasItemparameterhtml2canvas(element,{scale:2,//画布放大2倍dpi:300//根据需要增加分辨率到特定的DPI（每英寸点数），默认值为96}).then(canvas\=>{//做某事})#####2\.图片不显示问题问题：有时候你会莫名其妙的发现导出的图片中有些图片没有出现解决方法：主要是因为图片素材出现跨域，使用html2canvas时添加如下两个配置项html2canvas(element,{allowTaint:true,//是否允许跨域图片污染画布useCORS:true//是否尝试使用CORS从服务器加载图片}).then(canvas\=>{//dosomething})#####3\。PNG图片不透明问题问题：有时候可能用一张透明的PNG图片作为背景图片，但是得到的图片不是透明的，因为html2canvas生成的canvas默认背景颜色是白色，所以导出图片的背景颜色也是白色方案：使用html2canvas此时只需添加backgroundColor配置项即可。html2canvas(element,{backgroundColor:“transparent”,//也可以是rgba(0,0,0,0)}).then(canvas\=>{//dosomething})#####4\.在IOS系统的某些浏览器中，使用'
'标签对文本进行换行时，文本只显示第一行。问题：在IOS系统的部分浏览器中，使用
标签换行时，文字只显示第一行解决方法：出现该问题时，使用其他块级标签元素将需要换行的文字包裹在Html2canvas中，
文字只显示首行，可以换成html2canvas，文字只显示首行#####5\.截图不完整的问题：在生成图片的时候，如果需要生成的图片的节点很长（有滚动条），而且只能在当前区域截取。方案一：找到需要生成截图的dom节点。页面渲染完成后，clone一个备份节点，追加到body上。这个备份节点不能隐藏，设置备份节点的绝对定位和层级//获取节点的高度，然后为克隆的节点设置高度varheight\=document.getElementById('targetNode')。偏移高度；//克隆节点，默认为false，不复制method属性，如果为true，则复制所有varcloneDom\=document.getElementById('targetNode').cloneNode(true);//设置被克隆节点的css属性，因为之前的level默认为0，所以我们需要比较被克隆节点的level低cloneDom.style.cssText\="background\-color:white;位置：绝对；顶部：0；z\-index:\-1;”cloneDom.style.height\=height+'px';//将克隆节点追加到正文之后的document.body.appendChild(cloneDom);html2cavans(cloneDom,{allowTaint:true,onrendered:function(canvas){//dosomething}})方案二：生成截图前，将滚动条设置到顶部window.pageYoffset\=0;文档.documentElement.scrollTop\=0;文档.body.scrollTop\=0;或者在配置列表中添加参数配置html2canvas(element,{scrollY:0,}).then(canvas\=>{//dosomething})###案例代码html2canvas(element,{backgroundColor:'transparent',//解决生成图片不透明度问题allowTaint:true,//解决图片跨域问题useCORS:true,//解决图片跨域问题scrollY:0,//解决问题ofincompletescreenshotsscale:2,//解决生成图片不清晰的问题dpi:300,//解决生成图片不清晰的问题}).then(canvas\=>{letimg\=newImage();//新建一个img节点leturl\=canvas.toDataURL('imgae/png');//获取生成图片的src路径letaLink\=document.createElemtn('a');//创建一个tagaLink.style.display\='none';aLink.href\=url;aLink.download\='下载文件名xxx.png';//触发下载效果删除节点后document.body.appendChild(aLink);aLink.click();document.body.removeChild(aLink);})
