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

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

　 想必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>

js實現html截圖生成圖片