瀏覽器通常內建很方便的整頁網頁截圖的功能，但是有時候會遇到網頁內明明有圖，但是截圖檔案卻掉圖、或者是明明網頁上有圖片，但是卻變成黑色或空白格子的狀況。解決方式是改成使用支援自動捲動畫面的擴充套件。
 |
| Photo by Medhat Ayad on StockSnap |
問題狀況
新版瀏覽器通常內建很方便的整頁網頁截圖的功能，例如
- 微軟 Edge 瀏覽器的網頁擷取：如何在 Microsoft Edge 截取整個網頁畫面 | 北方羽林
- Google Chrome 瀏覽器的長截圖 (Capture full size screenshot)：【Chrome截圖教學】免外掛用2招內建截圖功能輕鬆實現 - 瘋先生
- LibreWolf、Mozilla Firefox 瀏覽器的拍攝畫面擷圖 (Take a Screenshot)：Firefox內建網頁截圖功能，截取完整網頁頁面也沒問題 | 梅問題．教學網
但是全頁網頁截圖，有時後會遇到掉圖狀況。例如截圖檔案：
或者是網頁上看到的圖片是正常的，但是截圖內的圖片卻變成白色或黑色格子夾雜的狀況
解決方式
問題發生原因在網頁使用圖片淡入 (Fade in) 或延遲載入 (Lazy Loading Images) 效果，當使用者瀏覽器捲動畫面，直到圖片進入畫面才會正常顯示圖片。所以瀏覽器內建的整頁網頁截圖功能，並不像使用者捲動畫面，而是一次性產生網頁截圖，所以導致問題發生。
支援自動捲動畫面的擴充套件：
- FireShot：支援 Chrome 或 Edge、LibreWolf、Firefox 等瀏覽器
- Awesome Screenshot 截圖錄屏：支援 Chrome、Edge、LibreWolf、Firefox、Safari
- GoFullPage - Full Page Screen Capture：支援 Chrome、Edge 瀏覽器
- Page Saver WE：支援 LibreWolf、Firefox 瀏覽器。但是如果網頁有浮動元素 (floating element) 會干擾畫面。
- 儲存至 Google 雲端硬碟：支援 Chrome 瀏覽器，可以直接將截圖上傳到 Google 雲端硬碟。建議不要使用在太長的網頁上。當網頁太長可能會存檔失敗。顯示錯誤訊息：「無法擷取圖片 (This request exceeds the MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND quota.)」
自動捲動畫面的擴充套件像是把每頁畫面最後拼貼在一起，所以不會遇到圖片淡入 (Fade in) 或延遲載入 (Lazy Loading Images) 。想到有些網頁有浮動元素 (floating element) ，例如置頂的選單列或固定出現在左右邊的選單是否會干擾截圖。實際測試 FireShot 或 Awesome Screenshot 並不會被浮動元素干擾，倒是 Page Saver WE 會被浮動元素嚴重干擾。
使用長網頁截圖，建議需要檢查擴充套件的截圖檔案，有沒有將網頁最下方內容截取。視狀況交叉使用 FireShot 或 Awesome Screenshot 等不同擴充套件。
留言
張貼留言