??????? html2canvas是一個相當不錯的JavaScript類庫，它使用了html5和css3的一些新功能特性，實現(xiàn)了在客戶端對網(wǎng)頁進行截圖的功

能。html2canvas通過獲取頁面的DOM和元素的樣式信息，并將其渲染成canvas圖片，從而實現(xiàn)給頁面截圖的功能。

它不需要來自服務器任何渲染，整張圖片都是在客戶端瀏覽器創(chuàng)建。當瀏覽器不支持Canvas時，將采用Flashcanvas或

ExplorerCanvas技術代替實現(xiàn)。以下瀏覽器能夠很好的支持該腳本：Firefox 3.5+, Google Chrome,

Opera新的版本, IE9以上的瀏覽器。

因為每個瀏覽器渲染頁面的方式都不盡相同，所以生成的圖片也不太一樣。雖然它目前還是處理開發(fā)階段，但還是很值得期待的。

這個插件依賴于jQuery插件，建議使用最新版的。

兼容性

html2canvas能在以下的瀏覽器中完美的運行。

- Firefox 3.5+

- Chrome

- Opera

- IE9使用方法

1、引入文件

首先我們需要引入jQuery庫和html2canvas插件文件，注意html2canvas插件文件一定要在jQuery的后面引入，不然會報錯。

2、調(diào)用插件

通過html2canvas方法調(diào)用插件，該方法接受兩個參數(shù)，第一個為要生成截圖的DOM元素，第二個參數(shù)為插件的配置

html2canvas(document.getElementById('content'), {

allowTaint: true,

taintTest: false,

onrendered: function(canvas) {

debugger;

canvas.id = "contenthh";

//document.body.appendChild(canvas);

//生成base64圖片數(shù)據(jù)

var dataUrl = canvas.toDataURL();

// ? ? ? ? ? ? ? ? var newImg = document.createElement("img");

// ? ? ? ? ? ? ? ? newImg.src =? dataUrl;

// ? ? ? ? ? ? ? ? document.body.appendChild(newImg);

window.open(dataUrl);

}

});

通過一個回調(diào)函數(shù)來處理獲取到的截圖。

圖片跨域問題

在網(wǎng)頁的圖片中，如果有跨域圖片，調(diào)用toDataURL的時候會出錯

SecurityError: The operation is insecure.

解決方法是在跨域的服務器上設置header設置為允許跨域請求

access-control-allow-origin: *? access-control-allow-credentials: true