JavaScript Capture HTML As PNG

2024-12-27

筆記如何透過 JavaScript 提供使用者轉換瀏覽中的 HTML 元素為 PNG 圖片。

JavaScript logo

說明

目前採用的解決方案是透過 html2canvas 進行處理，作業原理是將 HTML 元素轉換為 Canvas 元素後透過 toDataURL 的方式轉換為 PNG 圖片。

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<button id="captureBtn">Take Screenshot</button>
document.getElementById("captureBtn").addEventListener("click", () => {
    const captureElement = document.querySelector("body");

    html2canvas(captureElement).then(canvas => {
        const link = document.createElement('a');
        link.download = 'screenshot.png';
        link.href = canvas.toDataURL();
        link.click();
    }).catch(error => {
        console.error("Screenshot capture failed:", error);
    });
});

直接的截圖效果就相當不錯，只是要注意截圖按鈕本身也會被截圖，可以透過 JS 動態生成按鈕，並在截圖前移除按鈕。

const captureBtn = document.getElementById("captureBtn");

if (captureBtn) {
    captureBtn.parentNode.removeChild(captureBtn);
}

此外陰影、漸層、動畫等效果可能會有些問題，可以透過 CSS 調整或是透過 html2canvas 的參數進行調整。移除按鈕的動作，也可以整合在參數當中的 onclone 事件中進行 😎

html2canvas(captureElement, {
    scale: 1,
    backgroundColor: null,
    useCORS: true,
    allowTaint: true,
    logging: true,
    scrollX: 0,
    scrollY: 0,
    windowWidth: document.documentElement.scrollWidth,
    windowHeight: document.documentElement.scrollHeight,
    x: 0,
    y: 0,
    width: document.documentElement.scrollWidth,
    height: document.documentElement.scrollHeight,
    onclone: document => {
        const captureBtn = document.getElementById("captureBtn");

        if (captureBtn) {
            captureBtn.parentNode.removeChild(captureBtn);
        }
    }
}).then(canvas => {
    ...
});

注意事項

  • html2canvas 會將所有的 CSS 轉換為 Canvas 元素，因此可能會有些效果無法轉換。
  • html2canvas 需要搭配瀏覽器進行實作，不建議在 Node.js 環境中使用。
  • html2canvas 專案中的建議為實驗性質，不要應用於正式環境，且最新的更新日期為 2022 年，必須注意專案維護的狀況。
#F2E #Dev #JavaScript