html2canvas JS截图插件

github/download:https://github.com/niklasvh/html2canvas/releases

参考文章: 基于html2canvas实现网页保存为图片及图片清晰度优化

html2canvas 可以将html页面保存为图片,相当于进行截图,可以应用于一些活动H5的海报生成。

可以下载好文件通过script标签引入,或者通过npm安装

npm install html2canvas

用法:

基于html2canvas.js可将一个元素渲染为canvas,只需要简单的调用html2canvas(element[, options]);即可。下列html2canvas方法会返回一个包含有<canvas>元素的promise

//targetEl 是需要截图的元素,可以是某一个DIV,也可以是当前整个document,options是参数项,可配置宽高之类的,也可省略不传,返回一个canvas的dom对象
html2canvas(targetEl,options).then(function(canvas) {
    document.body.appendChild(canvas);
});

转为图片: html2canvas是返回的一个canvas,要保存为图片的话就要转为img,可以通过canvas.toDataURL()方法将canvas转为base64

跨域设置:如果网页有跨域的图片会影响到截图图片的生成,可以将html2canvas 的 userCORS 改为true

var opts = {useCORS: true};

html2canvas(element, opts);

猜你喜欢

转载自www.cnblogs.com/haqiao/p/10364006.html