最近H5項目有個功能需求：長按微信網頁保存為截圖。本人使用了html2canvas.js實現，感覺效果還不錯，有幾個注意點和大家分享一下。

html2canvas官網：https://html2canvas.hertzen.com/

使用的版本是最新版本：^1.0.0-alpha.12

let ctx = this;
html2canvas(document.getElementById("sign"),{ 
  scale: 2 }).then(function(canvas) {
  ctx.url = canvas.toDataURL("image/png");
});

html2canvas 可以將一個元素渲染為canvas。需要注意的是，Vue使用v-if和v-show的時候html2canvas無法將元素渲染為canvas。在我的項目之中存在一個骨架屏，這里我的解決方案是對要渲染的網頁采用position:absolute為其增加一個蒙層。

生成canvas之后可以采用canvas.toDataURL("image/png")將canvas轉化為base64。

關于清晰度問題：在Android手機上，生成的圖片會存在模糊。圖片的清晰度取決于生成的canvas的清晰度，在html2canvas之中存在一個參數scale，這里設置生成canvas的大小設置為圖片大小的兩倍保障清晰度。

最后，如果網頁之中存在較大的圖片，可能導致html2canvas生成canvas的時候圖片還沒有加載完，從而致使排版錯亂。可以判斷一下圖片是否加載完。

$('img').on('load', function() {
  //圖片加載完成
});