這是一張有關標題為 在瀏覽器中進行完美地螢幕截圖 的圖片

在瀏覽器中進行完美地螢幕截圖

介紹幾種在瀏覽器中截圖的方法,包含全頁截圖、手機視角截圖,以及如何擷取 Netflix 不會出現黑色的畫面。

前言

傳統上,我們通常會使用 Print Screen 鍵來截取整個螢幕,然後將其貼到 PowerPoint 或小畫家等軟體中進行裁切,最後再進行複製與分享。

在 Windows 10 以上的系統中,內建的「剪取工具」提供了更便捷的截圖方式,其快速鍵為 ⊞ Win + Shift + S,使用這組快捷鍵可以任意截取螢幕區域並直接將圖像儲存到剪貼簿中。macOS 也內建了截圖功能,其快捷鍵為 Shift + Command + 4,可以快速進行網頁截圖。

不過,內建截圖工具有侷限性:

  1. 無法截取整個網頁的全頁內容。
  2. 在 Netflix 等受 DRM 保護的媒體上,截圖後畫面會變成黑畫面。
  3. 無法自由擷取網頁的元件內容。

本篇文章將著重於在各大瀏覽器中截取網頁內容,突破傳統截圖的限制,無需安裝第三方擴充功能或程式,即可快速且精確地擷取網頁內容。

內建方法

Chrome

Google Chrome 是目前最受歡迎、主流的瀏覽器,其內建截圖功能相對有限。最便捷的截圖方法是利用系統提供的快捷鍵進行螢幕截圖:

  • Windows: ⊞ Win + Shift + S
  • macOS: Shift + Command + 4

如果需要截取完整網頁或特定元件實現精準的網頁截圖,請參考通用截圖方法

Microsoft Edge

自2020年以來,Microsoft Edge 基於 Chromium 引擎,成為 Windows 的預設瀏覽器。由於它與 Chrome 共享渲染引擎和 JavaScript 引擎,Edge 在效能、網頁相容性以及對現代網頁技術的支持方面表現相似。

Edge 內建了一個截圖工具,您可以通過點選滑鼠右鍵與螢幕擷取畫面或使用快捷鍵 Ctrl + Shift + S 來啟動。這個工具允許使用者擷取「選定區域」或「整個頁面」,並提供基本的註解功能。截圖完成後,您可以選擇將其複製到剪貼簿或保存為檔案。

Mozilla Firefox

Mozilla Firefox 由非營利組織 Mozilla 基金會開發,是一款擁有悠久歷史的開源瀏覽器。儘管採用與 Chromium 不同的渲染引擎,因此在網頁載入速度與相容性上略有差異,但仍具備穩定的效能。雖然近年來市場佔有率有所下降,但開源特性和 Mozilla 持續的支持使得它依然擁有一群忠實的使用者。

Firefox 的截圖功能十分強大,快捷鍵與 Edge 一樣為 Ctrl + Shift + S。使用者除了可以截取畫面中的特定區域,還可以點選網頁上的 HTML 元件進行截圖。並與 Edge 一樣可選擇 儲存完整頁面儲存可視範圍,滿足不同需求。

Safari

Safari 是 macOS 上的預設瀏覽器,但與 Chrome 一樣,瀏覽器內部缺乏對使用者右鍵的截圖功能。可以透過系統快捷鍵來進行區域性的螢幕截圖(Shift + Command + 4)。

如果需要截取完整網頁或特定元件實現精準的網頁截圖,請參考通用截圖方法

通用截圖方法

物件截圖

主流瀏覽器的開發人員工具提供了精確截圖功能,可以截取特定網頁元件或整個頁面。步驟如下:

  1. 於 Chrome / Edge / Firefox / Safari 中,開啟開發人員工具。其快捷鍵為 F12 或是 Ctrl + Shift + I。或是可以於視窗右上方的列表中 → 更多工具 → 找到開發人員工具。
  1. 選擇元素選取器,找到您想要擷取的目標元素,對著 HTML 原始碼滑鼠右鍵並選擇擷取節點螢幕擷取畫面,以精確截取該物件的截圖。

整頁截圖

要擷取整個網頁的截圖,打開開發者工具,選擇 <html><body> 元素,滑鼠右鍵並選擇擷取節點螢幕擷取畫面。這個方法在大多數網頁上都有效,但對於動態渲染的網站,可能需要使用第三方工具來模擬滾動並拼接圖像。

模擬不同裝置的截圖

選取元件按鈕按鈕右邊的按鈕是切換模擬裝置(Ctrl + Shift + M),可以模擬不同裝置的長寬高、使用者代理(UserAgent)。藉此評估不同裝置下的情況。

在模擬裝置模式下,右上方的箭頭展開可以看到直接擷取可視範圍或是擷取整個頁面的按鈕。透過此按鈕進行截圖也是可以的。

裝置模擬與截圖

Netflix 中的截圖方法

Netflix 等串流媒體使用數位版權管理(digital rights management,DRM)保護影片內容。並透過 Widevine 服務進行解密和渲染。在預設狀態下,瀏覽器會啟動硬體圖形加速。此時會使用 Widevine L1 層級的保護,並將解密與渲染的工作委派給硬體(如 GPU)。使用 Widevine L1 層級保護,這依賴於受信任執行環境(trusted execution environment,TEE),使影片截圖或錄影顯示黑畫面。

當禁用硬體加速後,瀏覽器將切換為基於軟體的影像解碼,而不是使用 GPU 硬體解碼。由於軟體解碼無法像硬體解碼那樣依賴受信任的執行環境(TEE),因此可以在不顯示黑螢幕的情況下進行截圖和錄製螢幕。

在傳統方式下,使用 Chromium 核心的瀏覽器,內部都有圖形加速的開關,關閉即可使用內建的截圖方式進行截圖。

Chrome 圖形加速 Edge 圖形加速

又或者在不關閉硬體加速的情況下,使用物件截圖的方式也是可以成功截圖的。

結論

本篇文章說明數個在不同瀏覽器中進行截圖的技巧,由於本身平常使用的瀏覽器為 Edge,所以截圖上都是透過 Ctrl + Shift + S 進行截圖與分享。如果要實現整個網頁或是特定元件的截圖,通常的做法就直接打開開發人員工具,直接對著該物件右鍵並擷取節點螢幕擷取畫面。會比透過其他特定的軟體進行截圖來得更快更高效。

參考文獻

  1. 使用開發人員工具擷取螢幕截圖的 4 種方式
  2. Take screenshots in Firefox
  3. disabling hardware acceleration bypasses the Netflix DRM policies and allows you to record movies - Chromium
主題 Stack 由 Jimmy 設計