html2canvas根據DOM元素樣式實現網頁截圖

html2canvas是一個至關不錯的JavaScript類庫，它使用了html5和css3的一些新功能特性，實現了在客戶端對網頁進行截圖的功
能。html2canvas經過獲取頁面的DOM和元素的樣式信息，並將其渲染成canvas圖片，從而實現給頁面截圖的功能。


它不須要來自服務器任何渲染，整張圖片都是在客戶端瀏覽器建立。當瀏覽器不支持Canvas時，將採用Flashcanvas或
ExplorerCanvas技術代替實現。如下瀏覽器可以很好的支持該腳本：Firefox 3.5+, Google Chrome,
Opera新的版本, IE9以上的瀏覽器。

由於每一個瀏覽器渲染頁面的方式都不盡相同，因此生成的圖片也不太同樣。雖然它目前仍是處理開發階段，但仍是很值得期待的。

這個插件依賴於jQuery插件，建議使用最新版的。
兼容性
html2canvas能在如下的瀏覽器中完美的運行。

- Firefox 3.5+
- Chrome
- Opera
- IE9使用方法
一、引入文件

首先咱們須要引入jQuery庫和html2canvas插件文件，注意html2canvas插件文件必定要在jQuery的後面引入，否則會報錯。
<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>
二、調用插件

經過html2canvas方法調用插件，該方法接受兩個參數，第一個爲要生成截圖的DOM元素，第二個參數爲插件的配置
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); } });
經過一個回調函數來處理獲取到的截圖。
圖片跨域問題
在網頁的圖片中，若是有跨域圖片，調用toDataURL的時候會出錯
SecurityError: The operation is insecure.
解決方法是在跨域的服務器上設置header設置爲容許跨域請求
access-control-allow-origin: *  access-control-allow-credentials: true
官網主頁: http://html2canvas.hertzen.com/
本站文章除註明轉載外，均爲本站原創或翻譯，歡迎任何形式的轉載，但請務必註明出處，尊重他人勞動共創和諧網絡環境。
轉載請註明：文章轉載自：問說 » html2canvas根據DOM元素樣式實現網頁截圖
本文標題：html2canvas根據DOM元素樣式實現網頁截圖