html2canvas 将网页保存为图片

最近做数据可视化项目，需要用到截图功能，在网上搜了一圈，发现 html2canvas 不错，奈于没用过，只能各种搜，最后发现下面这篇通俗易懂的文章：

scale：是用来调整生成图片屏幕分辨率的，其实设置成1再iphone上生成的图片清晰度没啥问题，但是再有些android手机上就很模糊，所以为了兼顾这部分手机就把scale设置成了2;
useCROS：这个参数是用来设置是否允许使用跨域的图片进行访问的，好像默认就是true，不太记得了；
logging：这个是日志打印的，实际上线当然不需要了，所以就false；

还有一点要说明下，再使用微信的头像的时候生成的图片老是会把头像丢失，其他服务器的图片都可以，尼玛就是想不通，后来就先转成base64放到img标签里面生成图片，就解决了这个问题；

此外，说个canvas将img转base64的问题，如下：

 function getBase64Image(imgurl) {
 	var img = new Image();
 	img.src = imgurl;
 	img.setAttribute('crossOrigin', 'anonymous');
 	img.onload=function(){
 	     var canvas = document.createElement("canvas");
 	     canvas.width = 300;//这个设置不能丢，否者会成为canvas默认的300*150的大小
 	     canvas.height = 300;//这个设置不能丢，否者会成为canvas默认的300*150的大小
	    var ctx = canvas.getContext("2d");
	    ctx.drawImage(img, 0, 0, 300, 300);
	    var dataURL = canvas.toDataURL("image/png"); 
	    console.log(dataURL)
	    $("#img").attr("src",dataURL);
	    html2img();
 	}
}

也是为了解决canvas转base64图片大小不对的问题！

接下里是一个小 demo：

1、html页面引入两个js，html2canvas.js里面不用改东西哦

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/html2canvas.js"></script>

2、css样式：

.main{width:100%; background-color: #fff; color:#000;}
.main h2{ text-align: center;}
.main p{ text-align: left; padding: 0;}
.main hr{ margin-top: 0.3rem;}
.main table{ width: 100%;border-collapse: collapse;border-spacing: 0;}
.main table td,.main table th{ padding: 0.5rem; border:1px solid #ccc; text-align: center;}
.btn{ width: 6rem; height: 2rem; line-height: 2rem; text-align: center; color: #fff; background: red; }

3、html布局：

<body>
	<img id="screenShotImg" alt="我是显示截图的">
	<div class="btn">点击截图</div>
    <div id="targetDom" class="main" 
    >
        <div style="padding: 0 0.5rem 0.5rem; text-align: center;">
            <h2>哈哈哈</h2>
            <hr />
            <p>我在测试</p>
            <p>我真的在测试</p>
            <p>呀哈，你在测试</p>
            <p>嗯哪，我在测试</p>
            <table>
                <thead>
	                <tr style="height: 1.5rem;">
	                    <th style="vertical-align: middle;">姓名</th>
	                    <th style="vertical-align: middle;">性别</th>
	                    <th style="vertical-align: middle;">年龄</th>
	                    <th style="vertical-align: middle;">爱好</th>
	                </tr>
                </thead>
                <tbody>
	                <tr>
	                    <td style="width: 25%;vertical-align: middle;">张三</td>
	                    <td style="width: 25%;vertical-align: middle;">男</td>
	                    <td style="width: 25%;vertical-align: middle;">23</td>
	                    <td style="width: 25%;vertical-align: middle;">笑</td>
	                </tr>
	                <tr>
	                    <td style="width: 25%;vertical-align: middle;">李四</td>
	                    <td style="width: 25%;vertical-align: middle;">男</td>
	                    <td style="width: 25%;vertical-align: middle;">23</td>
	                    <td style="width: 25%;vertical-align: middle;">笑</td>
	                </tr>
	                <tr>
	                    <td style="width: 25%;vertical-align: middle;">王五</td>
	                    <td style="width: 25%;vertical-align: middle;">男</td>
	                    <td style="width: 25%;vertical-align: middle;">23</td>
	                    <td style="width: 25%;vertical-align: middle;">笑</td>
	                </tr>
	                <tr>
	                    <td style="width: 25%;vertical-align: middle;">赵六</td>
	                    <td style="width: 25%;vertical-align: middle;">男</td>
	                    <td style="width: 25%;vertical-align: middle;">23</td>
	                    <td style="width: 25%;vertical-align: middle;">笑</td>
	                </tr>
	                <tr>
	                    <td style="width: 25%;vertical-align: middle;">李七</td>
	                    <td style="width: 25%;vertical-align: middle;">男</td>
	                    <td style="width: 25%;vertical-align: middle;">23</td>
	                    <td style="width: 25%;vertical-align: middle;">笑</td>
	                </tr>
                </tbody>
            </table>
            <img src="image/haha.png" width="320" style="margin:0.5rem;" />
            <p>结束了，ending</p>
        </div>
    </div>
</body>

<script>
	document.querySelector('.btn').onclick = function(){
		screenShot($('#targetDom'),function (canvas,width,height) {
	        document.querySelector('#screenShotImg').src = canvas;
	        document.querySelector('#screenShotImg').style.width = width+"px";
	        document.querySelector('#screenShotImg').style.height = height+"px";
	    });
	}
 
    /**
     * 截图功能
     * targetDom 要克隆的目标dom元素
     * cb 回调函数
     */
    function screenShot(targetDom,cb){
        var copyDom = targetDom.clone();//克隆dom节点
        copyDom.css('display','block');
        $('body').append(copyDom);//把copy的截图对象追加到body后面
        var width = copyDom.width();//dom宽
        var height = copyDom.height();//dom高
        var scale = 2;//放大倍数
        var canvas = document.createElement('canvas');
        canvas.width = width*scale;//canvas宽度
        canvas.height = height*scale;//canvas高度
        var content = canvas.getContext("2d");
        content.scale(scale,scale);
        var rect = copyDom.get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
        content.translate(-rect.left,-rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位
        html2canvas(copyDom, {
            allowTaint:true,
            tainTest:true,
            scale:scale,
            canvas:canvas,
            width:width,
            heigth:height,
            onrendered: function(canvas) {
                if(cb){
                    copyDom.css('display','none');
                    cb(canvas.toDataURL("image/png"),width,height);
                }
            }
        });
    }
</script>

转自：

1、https://www.cnblogs.com/yanweidie/p/5203943.html

2、http://html2canvas.hertzen.com/documentation

3、https://blog.csdn.net/guozh90/article/details/79204061

4、https://blog.csdn.net/playboyanta123/article/details/79301050

html2canvas 将网页保存为图片

猜你喜欢