簡單的網頁截圖功能 – 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'));