網頁截圖功能 DOM to image

最近在工作上需要寫網頁截圖的功能，所以稍微研究了一下 dom-to-image 這個插件，在我寫這篇筆記時的版本是 2.15.0。
dom-to-image
npm-dom-to-image

起手式

npm

如果要使用 npm 的方式可以參考以下安裝指令：

npm install dom-to-image

官網範例

**step1 **

node 參數放入要抓取截圖的 DOM 節點，config 的部分放入細部的設定。

<script>
  domtoimage.toPng(node,config)
  //程式碼放的位置
</script>

config` 設定

const config = {
  quality: 1,
  style: { filter: "grayscale(100%)", width: "600px" }
};

• quality: 設定圖片的品質。
• style: 可以套用濾鏡，也可以設定圖片的寬度與高度。

step2
後面接非同步程式碼

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    // 非同步程式碼
    .then(function (dataUrl) {
        var img = new Image();
        // 產生圖片的網址
        img.src = dataUrl;
        // 把圖片加入到 body 節點的下方
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

我在 CodePen 中加入一個按鈕，去監聽 click 事件，觸發 domtoimage ，擷取到 capture1 DOM 元素，轉為圖片， 然後把圖片的網址 append 到按鈕之後的 inserDiv 節點上。

擷取 DOM 元素，下載圖片

接下來加上以下程式碼，就可以做到截取 DOM 元素，轉為圖片之後下載的功能。

// 幫下載的圖片檔案名稱
const filename = "popeye_Demo_" + new Date().getTime();
// 下載的部分
var link = document.createElement("a");
// 下載圖片的檔名
link.download = `${filename}.jpeg`;
link.href = dataUrl;
link.click();

完整 JS 程式碼

var node = document.getElementById("capture1");
// config 參數設定
const config = {
  quality: 1,
  style: { filter: "grayscale(100%)", width: "600px" }
};

const newnode = document.createElement("h2");
const textnode = document.createTextNode("截到的圖");
newnode.appendChild(textnode);

// 觸發按鈕
const btn = document.getElementById("captureBtn");
// 監聽觸發按鈕 domtoimage.toPng(node)
captureBtn.addEventListener("click", (e) => {
  domtoimage
    .toPng(node, config)
    .then(function (dataUrl) {
      var img = new Image();
      img.src = dataUrl;
      const filename = "popeye_Demo_" + new Date().getTime();
      // 下載的部分
      var link = document.createElement("a");
      // 下載圖片的檔名
      link.download = `${filename}.jpeg`;
      link.href = dataUrl;
      link.click();
      // 把截圖插入到指定的位置
      const inserDiv = document.getElementById("insert");
      inserDiv.appendChild(newnode);
      inserDiv.appendChild(img);
    })
    .catch(function (error) {
      console.error("oops, something went wrong!", error);
    });
});

參考資料

• 做一個簡單的網頁截圖功能
• html2canvas 官網
• https://dev.to/letswrite/jian-dan-de-wang-ye-jie-tu-gong-neng-dom-to-image-2h8d
• https://codepen.io/weilinzung/pen/VXzEaN
• https://stackblitz.com/edit/react-3j9qja?file=src%2FApp.js