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);

html2canvas JS截图插件

原文：https://www.cnblogs.com/haqiao/p/10364006.html