使用html2canvas.js實現頁面截圖
阿新 • • 發佈：2019-02-06
由於最近專案需求，需要實現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佈局：
4、js：<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>
左圖為html頁面，右圖為截出來的圖片
來自：1、https://www.cnblogs.com/yanweidie/p/5203943.html
2、http://html2canvas.hertzen.com/documentation