“

閱讀本文大概需要 3 分鐘。

截圖是可以說是每個(gè)人必備的技能，有時(shí)候需要截個(gè)手機(jī)屏，有時(shí)候需要截個(gè)網(wǎng)頁屏，方式有很多，各種快捷鍵和插件也都能夠辦到。

但下面這個(gè)情況不知道大家會怎么來做。

需求切入

有一天，我在電腦上看到了一條微博，或者一篇文章。

比如微博像這樣：

比如文章像這樣：

這時(shí)候我需要把這條微博所在的白色區(qū)塊單獨(dú)截下來，或者把這篇文章所在的長文區(qū)域單獨(dú)截下來，而且不要其他額外的內(nèi)容，而且要做到邊界精準(zhǔn)對齊，絲毫不差。

比如微博我就要截圖成這樣子：

這里是把微博的這個(gè)白色卡片截圖下來了，比如這個(gè)微博卡片實(shí)際上是 600px （像素）寬，我要的截圖就必須是 600px（像素）寬，高度也是一樣的。

怎么做呢？

可能大家會這么做：

我們知道有些軟件帶的截圖功能是帶有放大鏡功能的，比如微信里面自帶的截圖功能就帶有如圖所示的放大鏡功能，如圖所示：

要做到精準(zhǔn)截圖，可能大家會在放大鏡一點(diǎn)點(diǎn)把鼠標(biāo)截圖起始和終止點(diǎn)和卡片的左上角和右下角仔細(xì)對齊，對不齊再輕輕一點(diǎn)點(diǎn)拖動下鼠標(biāo)調(diào)整下，最后截下來。

但很多情況下，有了這個(gè)功能還是不能很好地對齊的，萬一放手的一瞬間手滑了，就截錯位了，萬一最后截成了 599px 或者 601px 寬，會很讓人抓狂。

那么怎么來做呢，這里介紹兩個(gè)方法。這兩個(gè)方法也可以說是程序員專屬的高效精準(zhǔn)截圖方法，不過即使你不是程序員，也能一看就懂哈。

所以為了能照顧到所有的人，我把步驟一步步截圖寫下來了，可能看著比較啰嗦，技術(shù)大神一看就懂。

如果你懂一些網(wǎng)頁開發(fā)，那么整個(gè)過程就是這么三步：

?Devtool 選中 Node?Ctrl + Shift + P（Mac 上 Command + Shift + P）?Capture Node Screenshot

回車完畢，截圖就下載下來了。

如果想了解更詳細(xì)的話，可以接著往下看哈。

高效精準(zhǔn)截圖

下面詳細(xì)說這個(gè)過程了哈。

首先我們需要借助于網(wǎng)頁的開發(fā)者工具來完成這個(gè)功能，怎么來做呢？

比如我這里用的是 Chrome 瀏覽器，打開了一個(gè)微博頁面，如圖所示：

這時(shí)候我就想把中間的這條微博截圖下來。

這時(shí)候打開開發(fā)者工具，可以點(diǎn)擊鼠標(biāo)「右鍵」，再選擇「檢查」，打開開發(fā)者工具，如圖所示：

打開開發(fā)者工具之后，我們選擇最左邊的「Elements」選項(xiàng)卡，如下圖第 ① 步，然后按左邊的箭頭，如圖第 ② 步，然后再去選擇微博的區(qū)域內(nèi)容，如圖第 ③ 步。

這時(shí)候我們發(fā)現(xiàn)，用箭頭選擇的區(qū)域浮現(xiàn)了一個(gè)藍(lán)色蒙層，與此同時(shí)下方「Elements」選項(xiàng)卡的內(nèi)容也呈現(xiàn)了一個(gè)藍(lán)色蒙層。經(jīng)過調(diào)整，我們將想要截圖的區(qū)域正好選中，與此同時(shí)代碼區(qū)域也被選中，如下圖所示。

這時(shí)候，被選中的區(qū)塊在網(wǎng)頁里面稱作一個(gè)節(jié)點(diǎn)，中文叫做 Node，下面的內(nèi)容就是網(wǎng)頁的源代碼，就是對應(yīng)的節(jié)點(diǎn)的源代碼。

好，下面我們其實(shí)就是要把這個(gè)節(jié)點(diǎn)的顯示內(nèi)容保存下來了。

這時(shí)候我們按快捷鍵「Ctrl + Shift + P」，如果是 Mac 的話按「Command + Shift + P」，這時(shí)會彈出這么一個(gè)輸入框：

這時(shí)候我們輸入「node」，它會第一個(gè)選中叫做「Captcha node screenshot」的功能，然后點(diǎn)擊回車。

好了，這時(shí)候就發(fā)現(xiàn)網(wǎng)頁閃了一下進(jìn)行了截圖，然后微博區(qū)域的圖就下載下來了。下載的圖就是下面這樣子了。

像素絲毫不差，這樣精準(zhǔn)截圖就完成了！

注意：如果是 Mac Retina 屏幕的話可能得到的圖會是兩倍的分辨率。

怎樣？是不是簡單又高效，當(dāng)然最主要的是精準(zhǔn)！如果你以后需要在網(wǎng)頁里面精準(zhǔn)截圖的話，就可以用這個(gè)方式啦。

下面再介紹一個(gè)方法，功能和原理是一樣的，可能更方便一些。

我用的是 Mac，我看了看我的 Safari 瀏覽器里面直接帶了這么一個(gè)功能，在這里也一并記錄下來。

比如我拿一個(gè)新聞頁面來說：

我想把左側(cè)的這篇文章長截圖下來，不要右側(cè)的一些熱點(diǎn)、排名區(qū)塊，怎么做呢？

同樣是打開開發(fā)者工具，右鍵點(diǎn)擊「檢查元素」即可，同樣的方式選中文章的區(qū)域，如圖所示：

好，這時(shí)候直接在代碼區(qū)域點(diǎn)擊右鍵，選擇「捕捉屏幕快照」即可。

這時(shí)候這個(gè)內(nèi)容的長截圖就下來了，如圖所示：

好，現(xiàn)在我們就可以利用 Chrome 和 Safari 瀏覽器對網(wǎng)頁內(nèi)容進(jìn)行精準(zhǔn)截圖了，長截圖也可以完成，大家可以嘗試一下。

有朋友會問了，如果想要改一下樣式怎么辦呢？如果你懂 CSS 的話，可以在網(wǎng)頁里改 CSS 代碼，自行修改呈現(xiàn)樣式，比如改個(gè)背景顏色或者改變下寬度、高度都是可以的。或者還有更多的功能，如刪除或添加節(jié)點(diǎn)等等功能，這個(gè)在剛才彈出來的開發(fā)者工具里面也可以操作。如有興趣可以多了解網(wǎng)頁開發(fā)相關(guān)的知識。

好了，以上就是利用網(wǎng)頁開發(fā)者工具進(jìn)行快速精準(zhǔn)局部截圖的方法，希望對大家有幫助。

崔慶才丨靜覓

隱形字

同名公眾號「崔慶才丨靜覓」

在這里分享自己的一些經(jīng)驗(yàn)、想法和見解。

長按識別二維碼關(guān)注