1、HTML2Canvas
Html2canvas 使您能够间接在用户浏览器上截取网页或局部网页的“屏幕快照”。屏幕截图基于DOM，脚本遍历加载页面的DOM，收集指标节点的所有元素信息，而后将其用于构建页面的示意模式。换句话说，它实际上并非是截取页面，而是依据它从DOM读取的属性来构建页面的表现形式，因而不能保障100%还原原图。
官网文档：http://html2canvas.hertzen.com/documentation
2、应用办法
html2canvas(element).then(canvas => { // canvas 为转换后的Canvas对象 let oImg = new Image(); oImg.src = canvas.toDataURL(); // 返回base64 data图片url数据, 可在toDataURL()增加参数设置图片格式，默认png document.body.appendChild(oImg); // 将生成的图片增加到body})3、常见问题与解决方案
##### 1\. 图片含糊问题问题：有时候咱们会发现，导出的图片部分有些图片看起来没有原图那么清晰。计划1：或者是因为指标节点内应用背景图片的起因，倡议应用<img>标签代替背景图款式计划2：如果还是会含糊，能够先将canvas画布放大，而后再将生成后图片等比缩放var width \= element.offsetWidth; var height \= element.offsetHeight; var canvas \= document.createElement(“canvas”); var scale \= 2; canvas.width \= width \* scale; // 放大画布 canvas.height \= height \* scale; // 放大画布 canvas.getContext(“2d”).scale(scale,scale); // 2d绘制且将canvas画布横坐标纵坐标各放大2倍。 var opts \= { scale: scale, canvas: canvas, width: width, height: height } html2canvas(element, opts).then(canvas \=> { var dataUrl \= canvas.toDataUrl(); // 生出图片base64格局url var newImg \= document.createElement(“img”); // 创立img元素 newImg.src \= dataUrl; // 给img元素指定门路 newImg.style.widht \= canvas.width/scale + ‘px’; // 等比缩放生出图片宽度 newImg.style.height \= canvas.height/scale + ‘px’; // 等不缩放生成图片高度 })计划3：另一种办法是给html2canvas增加配置项参数html2canvas(element, { scale: 2, // 画布放大2倍 dpi: 300 // 依据须要将分辨率进步到特定的DPI(每英寸点数), 默认值为96 }).then(canvas \=> { // do something })##### 2\. 图片不显示问题问题：有时候可能莫名其妙地发现有些图片并没有呈现在导出的图片中计划：基本上是因为图片素材呈现跨域，应用html2canvas时增加以下两个配置项html2canvas(element, { allowTaint: true, // 是否容许跨域图像净化画布 useCORS: true // 是否尝试应用CORS从服务器加载图像 }).then(canvas \=> { // do something })##### 3\. PNG图片不通明问题问题：有时候可能用到通明的PNG图片作为背景图，可是后果最初生成的图片却并不通明，这是因为html2canvas生出的canvas背景色彩默认为红色的缘故，所以导出的图片背景色彩也是红色计划：应用html2canvas时增加backgroundColor配置项就好html2canvas(element, { backgroundColor: “transparent”, // 也能够是rgba(0,0,0,0) }).then(canvas \=> { // do something })##### 4\. 在IOS零碎局部浏览器中，用'<br/>'标签进行文字换行时，文本只显示第一行问题：在IOS零碎局部浏览器中，用<br/>标签进行文字换行时，文本只显示第一行计划：呈现该问题时，采纳其余块级标签元素对须要进行换行的文字别离包裹Html2canvas, <br/> 文本只显示第一行 可替换成 <ul\> <li\>html2canvas,</li> <li\>文本只显示第一行</li> </ul>##### 5\. 截图不全问题：在生成图片的时候，如果须要生成图片的节点很长(伴有滚动条),只能截取到以后区域计划1：找到须要生成截图的dom节点，在页面渲染实现之后，克隆一份备份节点，追加到body前面，这份备份节点不能是暗藏状态，设置备份节点的相对定位和图层级别// 获取节点高度，前面为克隆节点设置高度 var height \= document.getElementById (‘targetNode’). offsetHeight; // 克隆节点，默认为false，不复制办法属性，为true是全副复制 var cloneDom \= document.getElementById (‘targetNode’).cloneNode(true); // 设置克隆节点的css属性，因为之前的层级默认为0，咱们须要比被克隆的节点层级低 cloneDom.style.cssText \= “background\-color: white; position: absolute; top: 0; z\-index: \-1;” cloneDom.style.height \= height + ‘px’; // 将克隆节点追加到body前面 document.body.appendChild(cloneDom); html2cavans(cloneDom, { allowTaint: true, onrendered: function (canvas) { // do something } }) 计划2：在生出截图前，先把滚动条置顶window.pageYoffset \= 0; document.documentElement.scrollTop \= 0; document.body.scrollTop \= 0; 或者在配置列表增加参数配置 html2canvas(element, { scrollY: 0, }).then(canvas \=> { // do something })### 7\. 案例代码html2canvas(element, { backgroundColor: ‘transparent’, // 解决生出图片不通明问题 allowTaint: true, // 解决图片跨域问题 useCORS: true, // 解决图片跨域问题 scrollY: 0, // 解决截图不全问题 scale: 2, // 解决生出图片不清晰问题 dpi: 300, // 解决生出图片不清晰问题 }).then(canvas \=> { let img \= new Image(); // 新建img节点 let url \= canvas.toDataURL(‘imgae/png’); // 获取生出图片src门路 let aLink \= document.createElemtn(‘a’); // 创立a标签 aLink.style.display \= ‘none’; aLink.href \= url; aLink.download \= ‘下载文件名xxx.png’； // 触发下载成果后移除节点 document.body.appendChild(aLink); aLink.click(); document.body.removeChild(aLink); })