使用html2canvas將html標籤轉化爲圖片

有些時候咱們沒法用常規的截圖工具截取網頁內容，這時能夠嘗試如下方法：

一、首先容許跨域，Chrome瀏覽器能夠在快捷方式-》屬性-》目標欄裏添加：

 --disable-web-security --user-data-dir=D:\MyChromeDev

第一句是禁用網頁安全，第二句是使用另外一個用戶數據目錄，這樣將不會顯示收藏夾、插件等（其實不影響截圖）。

注意，兩處「--」前都有空格。

二、Ctrl+s將網頁保存到本地

三、打開本地保存的網頁，在瀏覽器控制檯中執行：

 1 var script = document.createElement("script");
 2 
 3 script.type = "text/javascript";
 4 
 5 script.src ="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-
 6 
 7 alpha.12/html2canvas.min.js";
 8 
 9 //"http://html2canvas.hertzen.com/dist/html2canvas.min.js";//備用
10 
11 document.body.appendChild(script);
12 
13 html2canvas(document.querySelector(".Post-Main,.Post-NormalMain")).then(canvas => {
14     document.body.appendChild(canvas);  //將canvas顯示在當前的窗口中，右鍵圖片另存爲便可  
15 });

這樣就能夠將一個很長的標籤保存成一張圖片。

注意、新版Chrome瀏覽器再也不支持直接在新標籤中打開dataurl。

注二、在控制檯中對樣式的修改不會體如今生成的canvas中。