Toys

自動化擷取特定網頁畫面、擷取網頁全畫面 (Capture Web Screenshot with Chrome Headless)

  1. 說明
    1. Headless Chrome
    2. Developer Tools

將網站擷取為圖片是自動化工作作業中一項輔助功能，而只要透過 Chrome Browser 原生支援的 Headless Mode，使用 cmd 即可輕鬆完成 😎

logo

說明

Headless Chrome

"c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" ^
--headless ^
--screenshot=C:\test.png ^
--disable-gpu ^
--window-size=1920,1080 https://www.google.com ^
--virtual-time-budget=2000

其中可以調整 –window-size 參數來控制要擷取網頁的 height, width

如果網頁有渲染效果的話，需要時間完成的話，可以透過 –virtual-time-budget 參數控制要等待的時間，單位是 ms 。

batch in one line

"c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --headless --screenshot=C:\img\test.png --disable-gpu --window-size=1920,1080 https://www.google.com

Developer Tools

Headless Mode 適合做為自動化截圖使用，且可以運用參數控制需求，而日常作業可以考慮使用 Developer Tools 進行截圖的功能，操作更為直接 😁