html5 實現網頁截圖 頁面生成圖片(圖文)
阿新 • • 發佈：2019-02-17
html2canvas通過獲取頁面的DOM和元素的樣式資訊，並將其渲染成canvas圖片，從而實現給頁面截圖的功能。
因為每個瀏覽器渲染頁面的方式都不盡相同，所以生成的圖片也不太一樣。
環境要求: jQuery
相容性: Firefox 3.5+, Chrome, Opera, IE9
測試生成的圖片效果 有些元素的樣式沒有完全展示出來
<html> <head> <meta name="layout" content="main"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script> <script type="text/javascript" > $(document).ready( function(){ $(".example1").on("click", function(event) { event.preventDefault(); html2canvas(document.body, { allowTaint: true, taintTest: false, onrendered: function(canvas) { canvas.id = "mycanvas"; //document.body.appendChild(canvas); //生成base64圖片資料 var dataUrl = canvas.toDataURL(); var newImg = document.createElement("img"); newImg.src = dataUrl; document.body.appendChild(newImg); } }); }); }); </script> </head> <body> Hello! <div class="" style="background-color: #abc;"> 計算機天堂測試html5頁面截圖 <br>jsjtt.com </div> <textArea id="textArea" col="20" rows="10" ></textArea> <input class="example1" type="button" value="button"> 生成介面如下： </body> </html>
說明在測試過程中出現的問題如果頁面上引用跨域的圖片檔案呼叫toDataURL的時候會出錯
SecurityError: The operation is insecure.
解決方法：在跨域的伺服器上設定header設定為允許跨域請求
access-control-allow-origin: * access-control-allow-credentials: true