利用Chrome開發者工具進行網頁長截圖


寫了一段Markdown想導出為圖片,可惜Typora本身導出的圖片質量不滿足要求。然后嘗試先導出為PDF,在轉為圖片,結果依然不理想。最后試了試先導出為HTML,再網頁截圖,效果很不錯。寫此文記錄一下解決方案。

首先調出Chrome開發者工具界面,可使用快捷鍵(Win為F12),在按下Ctrl+Shift+P調出命令搜索條,搜索條內輸入Capture即可看到截圖相關的選項:

對幾個Capture選項的簡要說明:

  • Capture full size screenshot能夠實現長截圖,網頁的截圖和你當前看到的網頁的排版狀態是相同的,就是說你可以調整網頁的縮放比例,來控制想要的截圖的最終效果。
  • Capture area screenshot實現選取截圖,點擊后選擇選取即可。
  • Capture node screenshot實現對某個HTML元素的截圖。
  • Capture screenshot實現對當前視區的截圖。

另外,開發者工具界面可能會擠壓到要截圖的主頁面,而達不到想要的效果。這時可讓開發者工具界面分離出來作為單獨的窗口:

如果想要在移動設備的截圖效果,可以點擊:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM