2018年6月4日 星期一

HTML 轉圖片- html2canvas



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

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

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

  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
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...