該如何將 HTML 網頁的指定區域截圖儲存下來成圖片檔案呢?使用兩個套件即可輕鬆達成!
廢話少說,直接上程式碼:
先使用 CDN 引用套件:
程式碼:
上面的程式碼先使用 html2canvas 套件將網頁的 DOM 元素轉換為 canvas (畫布),然後再使用 canvas2image 套件將 canvas 內容轉換成圖片下載。
參考資料:
GitHub - niklasvh/html2canvas
GitHub - hongru/canvas2image
jsDelivr - canvas2image
廢話少說,直接上程式碼:
先使用 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
留言
張貼留言
如果有任何問題、建議、想說的話或文章題目推薦,都歡迎留言或來信: a@ruyut.com