HTML2Canvas:用Javascript來做螢幕截圖

HTML2Canvas專案位置: https://html2canvas.hertzen.com/

---

簡介: HTML2Canvas(以下簡稱H2C)是一個Javascript工具用來將HTML元素轉換成Canvas，這樣就能很容易的把元素轉換成圖檔

---

簡單的範例

擷取整個網頁，並且將結果顯示在當前網頁上

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

擷取整個網頁並只取從左上角開始300x300的畫面，並且將結果顯示在當前網頁上

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 300,
  height: 300
});

在上面兩個範例可以看到一個很主要的事件叫做onrendered，這個事件會在完成擷取所指定之元素之後被觸發，也就是可以針對擷取結果(Canvas)做操作的地方。

---

如何下載擷取結果

這個工具的擷取結果是Canvas，所以只需要用Canvas本身的匯出功能就可以了(Canvas支援輸出jpeg, png)

html2canvas(document.body, {
  onrendered: function(canvas) {
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); //結果會是被Base64編碼後的圖片，但是要觸發下載必須先把型態改成octet-stream(用來騙瀏覽器而已，它還是png格式)
    window.location.href = image;
  }
});

---

Troubleshooting: 怎麼辦!!!SVG沒辦法被截取

SVG因為某些原因讓H2C沒辦法正常的擷取，解決方案就是用canvg先把SVG轉成Canvas之後再一起擷取