截取网页或屏幕快照插件-html2canvas

WEB前端 JS插件 2020年6月2日

html2canvas是一个截取网页或屏幕快照插件。通过读取DOM和元素的不同样式，将当前页面呈现为画布图像。一般在需要将h5页面生成海报的时候用。html2canvas库使用Promise，如果浏览器不支持Promises，可以先加载一个es6-promise的补丁。之前雷雪松的博客中介绍过HTML转图片的JS插件-rasterizeHTML.js。今天雷雪松给大家分享一个截取网页或屏幕快照的插件html2canvas。

1、引入html2canvas.js插件
[cc lang=”html” escaped=”true”]<script src=”html2canvas.min.js”></script>[/cc]

2、将id为canvas的元素生成图片并插入到body元素内
[cc lang=”javascript”]html2canvas(document.getElementById(‘canvas’)).then(function(canvas) {
document.body.appendChild(canvas);
});[/cc]

3、html2canvas.js可用的配置选项
backgroundColor：Canvas 背景颜色，如果希望值为transparent，那么设置null， 默认：’#ffffff’
imageTimeout：加载图片超时时间，0则无限制。默认：15000
ignoreElements：忽略的元素，如果函数返回值为真则忽略。ignoreElements:(element)=>{if(element.id===’ignore’){return true}} 则表示忽略id为ignore元素。默认：(element) => false
scale：用于渲染的比例。默认为浏览器设备像素比率。一般设置2可以得到高清图片。
useCORS：是否允许图片跨域，默认：false
width：canvas宽度，默认元素的宽度
height：canvas 高度，默认元素的高度

来源：截取网页或屏幕快照插件-html2canvas