js實現html截圖生成圖片

　  沒有華麗的開場，直入主題，這就是題主隨筆風格。隨筆既是平常工做積累，也可理解是個工做筆記，方便往後用到之處快速的有方可尋。

　  先講一個需求場景： 定製網頁截圖傳給服務器端保存，用戶關注公衆號後自動回覆該截圖。

　  想必js實現網頁截圖，你們第一思路是將網頁轉成canvas再由canvas轉成base64圖片。沒錯，個人思路也是這樣，在實際開發過程當中各類試錯、調研也驗證了該方案是最佳最便利的html轉圖片的方案(確定是！沒有之一)。那麼方案肯定後，大致的實現思路也就能夠往該方向去作了。因爲開發時間有限，這裏咱們就不本身手寫html2canvas的過程了，最快的速度固然是找現成的插件，通過插件之間的對比，不是樣式丟失就是圖片丟失，算什麼截屏啊？

這裏給你們推薦一個我用了還不錯的插件：html2canvas.js  github連接：https://github.com/niklasvh/html2canvas

　　關鍵代碼：

　　

<!--引入html2canvas庫-->
<script src="game/js/html2canvas.min.js"></script>
<script>
    html2canvas(document.body).then(function(canvas) {
    var base64 = canvas.toDataURL("image/png");
        console.log(base64 );//生成本地base64圖片
    });
</script>

　　固然，以上還不算個完整的demo！可能有部分朋友會發現截圖不完整或者報跨域的錯

　　這是由於你頁面中本地案例的圖片或者其餘網絡圖片和你當前項目不在一個域名下，那怎麼解決呢？把網絡圖片或者不在同一域名下的圖片轉成base64本地圖片，再進行截圖。

　　具體方法以下：

<script>
    function Image2Base64(img) {
         var canvas = document.createElement("canvas");
         canvas.width = img.width;
         canvas.height = img.height;
         var ctx = canvas.getContext("2d");
         ctx.drawImage(img, 0, 0, img.width, img.height);
         var dataURL = canvas.toDataURL("image/png");
         return dataURL
     }
</script>