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


//以前作一个生成海报的H5的例子代码

var poster = document.querySelector('#wrap') //要生成海报的DIV，最外层的

var width = poster.offsetWidth;

var height = poster.offsetHeight;

var canvas = document.createElement("canvas");

var scale = 2;

canvas.width = width * scale;

canvas.height = height * scale;

canvas.getContext("2d").scale(scale, scale);

var opts = {

scale: scale,

canvas: canvas,

width: width,

height: height ,

backgroundColor:'transparent'

};

//生成页面截图

html2canvas(poster,opts).then(function(canvas) {

var context = canvas.getContext('2d');

var img = new Image();

img.src = canvas.toDataURL()

img.id = 'poster'

poster.appendChild(img); //生成海报插入body ， 海报是透明的 ，层级最高, 盖在容器上面

});

 

转为图片: html2canvas是返回的一个canvas，要保存为图片的话就要转为img，能够经过canvas.toDataURL()方法将canvas转为base64

 

跨域设置：若是网页有跨域的图片会影响到截图图片的生成，能够将html2canvas 的 userCORS 改成true

var opts = {useCORS: true}; html2canvas(element, opts);