使用html2canvas.js实现页面截图

最新推荐文章于 2023-12-10 22:22:48 发布

guozh91

最新推荐文章于 2023-12-10 22:22:48 发布

阅读量1.4w

点赞数 1

文章标签： html2canvasjs截图

由于最近项目需求，需要实现html页面截图，经过查资料，找到了这个东东html2canvas，刚开始截出来的图片，空白、模糊、图片不完整，各种问题，但幸好有各路大神的见解，把问题解决了，以下是我写的一个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>

4、js：

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

左图为html页面，右图为截出来的图片

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

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

guozh91

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
6
评论
使用html2canvas.js实现页面截图

由于最近项目需求，需要实现html页面截图，经过查资料，找到了这个东东html2canvas，刚开始截出来的图片，空白、模糊、图片不完整，各种问题，但幸好有各路大神的见解，把问题解决了，以下是我写的一个demo，仅供大家参考哦1、html页面引入两个js，html2canvas.js里面不用改东西哦2、css样式：.main{width:100%; backgro
复制链接

扫一扫