1. 程式人生 > >使用html2canvas.js實現頁面截圖

使用html2canvas.js實現頁面截圖

由於最近專案需求,需要實現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