JavaScript 最簡單網頁元素截圖 示範

該如何將 HTML 網頁的指定區域截圖儲存下來成圖片檔案呢？使用兩個套件即可輕鬆達成！

廢話少說，直接上程式碼：

先使用 CDN 引用套件：

    
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script>
    

程式碼：

    
<!-- 要截圖的區域 -->
<div id="downloadContent">
    <h1>這是一個標題</h1>
    <p>這是一段文字</p>
    
    <!-- 示範用隨機圖片 -->
    <img src="https://picsum.photos/200/300" alt="">
</div>

<button id="download">下載</button>

<script>
    async function download() {
    
    	// DOM 轉 canvas
        const element = document.querySelector("#downloadContent");
        const canvas = await html2canvas(element, {
            useCORS: true, // 跨網域下載圖片
        })


		// canval 轉換為圖片並下載
        const imageData = canvas.toDataURL('image/png');
        const downloadLink = document.createElement('a');
        downloadLink.href = imageData;
        downloadLink.download = `image.png`;
        downloadLink.click();
    }

    const button = document.getElementById("download");
    button.addEventListener("click", download);

</script>

    

上面的程式碼先使用 html2canvas 套件將網頁的 DOM 元素轉換為 canvas (畫布)，然後再使用 canvas2image 套件將 canvas 內容轉換成圖片下載。

參考資料：
GitHub - niklasvh/html2canvas
GitHub - hongru/canvas2image
jsDelivr - canvas2image