在手動拼接？超效率網頁截圖術：善用內建工具，一鍵搞定長截圖與 ...

前陣子想要截圖自己網站後臺的圖表作為紀念，但問題來了，我不想一個區塊一個區塊的截圖，想要漂亮完整的把整個畫面保留下來，該怎麼辦呢？

跟作業系統的剪取工具或 Chrome 內建截圖比起來（只能抓到你眼前看到的範圍），這類擴充功能會自動幫你捲動頁面，把每一段內容都拼成一張完整的檔案（參考 DebugBear）。 它的原理很簡單：擴充功能會注入腳本，分段捲動頁面、逐步截圖，最後自動 ...

傳統截圖方法無法擷取超出螢幕範圍的內容，更可能在嘗試擷取 Netflix 等串流網站時只得到一片黑畫面，這種狀況讓許多人感到困擾。 本篇文章將作為您的終極指南，系統性地整合並詳解各種網頁截圖技巧。

一般的截圖工具，很難把「完整網頁」給擷取下來。 後來我認真查了一下，發現「Edge 瀏覽器」本身就有截圖功能。 今天我就來示範怎麼截圖～ 貼心提醒：如果圖片看不清楚，可以用滑鼠點開看大圖。 如果你是 Windows 系統，本身就會內建 Edge 瀏覽器。 這時候就用 Edge 瀏覽你要截圖的那個網頁，點擊「設定」>「與螢幕擷取畫面」。 Edge 的截圖功能有 3 個選項： 1. 擷取區域：你自己選擇要截哪些範圍。 2. 擷取畫面區域：Edge 按照網頁畫面擷圖。 3. 擷取整頁：由網頁從上至下，完整

文章內容包括將指定的 HTML 區塊轉換成 Canvas，將 Canvas 轉存成圖像文件，以及如何截取多個 div 並將它們存儲為圖像。 文章提供了範例和原始碼，以及一個實用的 Demo 供讀者參考和使用。

要實現這一點，您可以先建立一個 canvas 元素，並使用其 2D 繪圖功能重新建立您想要「螢幕截圖」的 HTML 元素的內容。 一旦 canvas 元素填滿了所需的內容，您就可以透過呼叫 toDataURL 函數並將結果設為新視窗或標籤的來源來擷取影像資料。

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