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