共计 3315 个字符,预计需要花费 9 分钟才能阅读完成。
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); | |
}) |
正文完