想要把 html 直接轉成圖片下載，這個 html2canvas 的 plugin 非常有用，以往需要 jQuery，現在也改成不用也可以執行了，使用方法很簡單，裝好 plugin 後用官網的方式就可以產生截圖。
- html2canvas(document.querySelector("#capture")).then(canvas => {
- document.body.appendChild(canvas)
- });
簡單講就是要指定要產生截圖的 id，這樣可以很方便的選擇 html 上的區塊產生圖片，其中 canvas 就是產生時的圖片，可以直接把他 append 到 html 上，或是使用以下方法直接下載。
- $("#auto").attr('href', canvas.toDataURL("image/png"));
- $("#auto").attr('download','download.png');
- lnk = document.getElementById("auto");
- lnk.click();
這邊是建一個 a，隱藏並設定 id=auto ，在使用 html5 新增的 download 屬性直接將產生的圖檔透過虛擬點擊的方式下載下來。
參考: jQuery 網頁特定區塊的截圖外掛 html2canvas
留言