利用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實現對當前視區的截圖。

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章