HTML 轉圖片- html2canvas

想要把 html 直接轉成圖片下載，這個 html2canvas 的 plugin 非常有用，以往需要 jQuery，現在也改成不用也可以執行了，使用方法很簡單，裝好 plugin 後用官網的方式就可以產生截圖。

view plaincopy to clipboardprint

1. html2canvas(document.querySelector("#capture")).then(canvas => {   
2.     document.body.appendChild(canvas)   
3. });  

簡單講就是要指定要產生截圖的 id，這樣可以很方便的選擇 html 上的區塊產生圖片，其中 canvas 就是產生時的圖片，可以直接把他 append 到 html 上，或是使用以下方法直接下載。

view plaincopy to clipboardprint

1. $("#auto").attr('href', canvas.toDataURL("image/png"));   
2. $("#auto").attr('download','download.png');   
3. lnk = document.getElementById("auto");   
4. lnk.click();  

這邊是建一個 a，隱藏並設定 id=auto ，在使用 html5 新增的 download 屬性直接將產生的圖檔透過虛擬點擊的方式下載下來。

參考: jQuery 網頁特定區塊的截圖外掛 html2canvas