Chrome原生工具實(shí)現(xiàn)長截圖

文章目錄

• Chrome原生工具實(shí)現(xiàn)長截圖
• • 前言
  • 操作步驟
  • 參考文章

前言

我們在網(wǎng)上沖浪時，經(jīng)常遇到一些搞笑的或者是寫的比較好的文章，想長截圖給別人分享?？墒?Windows自帶的截屏功能（Win + PrintScreen）也只能截當(dāng)前界面的圖，不能實(shí)現(xiàn)長截圖的效果，所以我們一般都會在瀏覽器中裝插件，利用插件進(jìn)行長截圖。

偶然間在網(wǎng)上看到說，Chrome瀏覽器不用安裝插件，利用原生工具即可進(jìn)行長截圖。趕緊下載了 Chrome瀏覽器進(jìn)行一番試驗(yàn)，原生工具真的可以進(jìn)行長截圖，真是皆大歡喜。

操作步驟

首先，我們先去網(wǎng)上下載并安裝一個 Chrome瀏覽器，百度搜索一下即可找到下載界面，安裝也很簡單，這里不再進(jìn)行贅述。

接著，我們打開 Chrome瀏覽器，選擇一個想要長截圖的網(wǎng)頁。比如這個頁面，我們可以看到，這篇文章內(nèi)容并不算少，必須進(jìn)行長截圖才行。

Chrome 原生的截圖功能隱藏在開發(fā)者工具中，所以我們要調(diào)出開發(fā)者工具界面。Windows系統(tǒng)可以通過以下兩種方式調(diào)出開發(fā)者工具界面

• 按下 F12鍵
• 在任意空白區(qū)域點(diǎn)擊鼠標(biāo)右鍵，點(diǎn)擊“檢查”

開發(fā)者工具界面打開如下

接著我們要打開搜索命令工具條，也有兩種方式

• 按下“Ctrl + Shift + P”鍵
• 鼠標(biāo)移至右上角更多按鈕，點(diǎn)擊 Run Command

最后，我們只需要在命令工具的輸入框中輸入對應(yīng)的命令即可實(shí)現(xiàn)不同的截圖效果。

• Capture full size screenshot 網(wǎng)頁長截圖
  • 實(shí)現(xiàn)整張網(wǎng)頁長截圖，Chrome 會自動將整個網(wǎng)頁內(nèi)容截取并保存至本地電腦，整個截取速度和效果上都有著不錯的表現(xiàn)
• Capture screenshot截取網(wǎng)頁可視區(qū)域
  • 將當(dāng)前網(wǎng)頁顯示的區(qū)域自動截圖并保存到本地
• Capture area screenshot截取選擇部分區(qū)域
  • 將截取由用戶選擇的部分區(qū)域
• Capture node screenshot截取手機(jī)版網(wǎng)頁長圖
  • 將截取網(wǎng)頁中選定元素的內(nèi)容。這一截圖命令特別之處在于，幫助用戶準(zhǔn)確地截取網(wǎng)頁中特定元素的內(nèi)容，首先用戶選擇網(wǎng)頁中某個截取元素，比如某張圖片、某個邊欄內(nèi)容等，接著再運(yùn)行 Capture node screenshot，這樣可以減少手動選擇截圖時的錯誤率

比如我們現(xiàn)在進(jìn)行 Capture full size screenshot長截圖

可以看到，截圖之后，開發(fā)者工具會在左下角提示用戶截圖成功，圖片保存在 Chrome瀏覽器設(shè)置的下載路徑里面。

我們點(diǎn)擊查看文件，看到確實(shí)是剛才網(wǎng)頁的完整長截圖，大功告成。

參考文章

無需安裝插件，用 Chrome 原生工具就能實(shí)現(xiàn)長截圖

總結(jié)

以上是生活随笔為你收集整理的Chrome原生工具实现长截图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。