簡單的網頁截圖功能 – DOM to Image

本篇要解決的問題

安裝 DOM to Image

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>

$ npm install dom-to-image
或
$ yarn add dom-to-image

import domtoimage from 'dom-to-image';

使用 Dom to Image

// 抓取指定的 div，產生 base64 格式圖片
// 之所以重複二次，下一段的注意事項會解釋
const el = document.getElementById('xxx');
const config = {
  quality: 1,
  style: { "filter": "grayscale(100%)" }
};
const dataUriTemp = await domtoimage.toPng(el, captureConfig).then(dataUrl => dataUrl);
const dataUri = await domtoimage.toPng(el, captureConfig).then(dataUrl => dataUrl);
// 下載圖片
const link = document.createElement('a');
const filename = 'Demo.png';
link.download = filename;
link.href = dataUri;
link.click();

• filter：可以濾掉指定的 tag。官方文件是用在濾掉 SVG 的 tag。
• bgcolor：指定背景色。
• width、height：指定寬、高。
• style：可以加上額外的 style。
• quality：圖片的品質，數值是 0 – 1，1 為最高，預設是 1。
• cacheBust：要不要清除緩存，true 是要、false 是否，預設是 false。
• imagePlaceholder：如果抓不到 div 的圖片，要給什麼墊檔圖，看文件是要填 Base64。

注意事項

• 圖片有 position: relative。
• 執行 domtoimage.toJpeg(targetId, [config]) 時，第一次圖片的地方會是空白，但第二次以後就會正常，所以……雖然很蠢，但為了維持手機世界的和平，請執行二次，這就是為什麼範例程式碼會先寫一次 dataUriTemp，接著又寫了一次 dataUri。

本篇 Demo 及原始碼

Notion AI 生成的文章

<script src="https://unpkg.com/dom-to-image@2.6.0/dist/dom-to-image.min.js"></script>

function captureScreenshot(element) {
  return new Promise((resolve, reject) => {
    domtoimage.toPng(element)
      .then((dataUrl) => {
        resolve(dataUrl);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

captureScreenshot(document.getElementById('element-id'));