-

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

WEB前端

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

1、引入html2canvas.js插件

1
<script src="html2canvas.min.js"></script>

2、将id为canvas的元素生成图片并插入到body元素内

1
2
3
html2canvas(document.getElementById('canvas')).then(function(canvas) {
document.body.appendChild(canvas);
});

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

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

    江浙日报 评论:
    2020年6月4日 上午9:12

    院子里开满了攻瑰,长满了葡萄。

发表评论

电子邮件地址不会被公开。 必填项已用*标注