JS 使用html2canvas實現頁面截圖功能

html2canvas的官方文檔地址：http://html2canvas.hertzen.com/

實現原理：將需要截圖的頁面在canvas中進行重繪，這樣將頁面轉換成圖片的過程。

注意事項：

• 不支持iframe
• 不支持跨域圖片（可以先將線上圖片轉換成base64，然后用base64作為圖片路徑）
• 不支持flash
• 不支持transform、transition過渡、animation動畫（備注：transform初始布局是可以的，但是不能參與動畫類的操作）

備注：這里特地說明下，很多同學會遇到圖片跨域的困惑，其實跨域圖片沒啥關系，我們可以將“跨域資源”轉換成“base64”，然后用base64作為圖片的路徑，這樣完美解決。如何將“在線圖片資源”轉換成“base64”呢？請看這個地址：http://www.cnblogs.com/minigrasshopper/p/9042686.html

html代碼實現

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

 

js代碼實現

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas);  // 直接使用canvas
    // var imgUrl = canvas.toDataURL("image/png"); // 將canvas轉換成img的src流
    // var imgUrl = canvas.toDataURL('image/png', 1); // 此方法可以設置截圖質量0-1
});

 

目前，Data URI scheme支持的類型有：
data:,文本數據
data:text/plain,文本數據
data:text/html,HTML代碼
data:text/html;base64,base64編碼的HTML代碼
data:text/css,CSS代碼
data:text/css;base64,base64編碼的CSS代碼
data:text/javascript,Javascript代碼
data:text/javascript;base64,base64編碼的Javascript代碼
data:image/gif;base64,base64編碼的gif圖片數據
data:image/png;base64,base64編碼的png圖片數據
data:image/jpeg;base64,base64編碼的jpeg圖片數據
data:image/x-icon;base64,base64編碼的icon圖片數據