掌握這4個(gè)小技巧，全網(wǎng)高清圖片任意存！

大家好，這里是貝茲嵐，野生互聯(lián)網(wǎng)設(shè)計(jì)師一枚~

現(xiàn)如今打開網(wǎng)站找參考已經(jīng)是很多設(shè)計(jì)師打開電腦的第一件事了，貝叔也是如此，但凡遇到點(diǎn)好看的圖片總會(huì)想著扒下來(lái)放在自己的庫(kù)里，下次有類似的需求時(shí)候就可以快速查看，給自己提供思路。

既然都知道建立個(gè)人圖庫(kù)的重要性，回歸到圖片的來(lái)源，怎么扒才算優(yōu)雅呢？

不是所有網(wǎng)站的圖片都能右鍵保存的，去問開發(fā)小哥么？ 一來(lái)，他們很忙可能沒空理會(huì)，二來(lái)，這個(gè)問題太基礎(chǔ)會(huì)被鄙視。

本文結(jié)合 4 種需要扒圖的場(chǎng)景，提供如何獲取的小技巧：

• 圖庫(kù)網(wǎng)站的圖片獲取
• 公眾號(hào)頭圖獲取
• 在線編輯網(wǎng)站的素材獲取
• 網(wǎng)頁(yè)圖標(biāo)獲取

Part1.圖庫(kù)網(wǎng)站的圖片獲取

以國(guó)外某某著名圖庫(kù)為例子，比如我們看到一張不錯(cuò)的風(fēng)景圖，點(diǎn)擊右鍵沒有保存菜單，而且不管對(duì)圖片進(jìn)行怎么樣的交互動(dòng)作，均不會(huì)出現(xiàn)右鍵菜單，這是很典型的圖片保護(hù)了。

那么，先來(lái)一個(gè)基本操作 3 連搞定：

1. 在 Chrome 瀏覽器中，打開開發(fā)者工具（快捷鍵 ? +?+ I）。
2. 點(diǎn)擊元素選擇工具(快捷鍵，? + ? + C)，并選中想要圖片并點(diǎn)擊。
3. 在右側(cè)高亮代碼行中，右鍵—Open in new tab；或者直接雙擊超鏈接，復(fù)制后再新頁(yè)面打開， 然后保存(ps：預(yù)覽窗口的圖片可以直接拖到本地哦)，搞定。

同學(xué)們可能會(huì)覺得，就這？對(duì)，沒錯(cuò)，就是這么簡(jiǎn)單，基本操作。

Part2.公眾號(hào)頭圖獲取

很多時(shí)候我們看到公眾號(hào)的頭圖，想收下來(lái)，但是點(diǎn)擊詳情頁(yè)之后，頭圖是看不見的，怎么獲取呢？

當(dāng)然，很多公眾號(hào)的插件可以做這些事，比如什么壹伴插件啦，但貝叔的觀念是學(xué)一點(diǎn)技術(shù)，萬(wàn)一呢，Always have plan B。

那么，我們來(lái)個(gè)「曲線救國(guó)」4 步搞定它：

1. 復(fù)制文章鏈接，在瀏覽器中打開.以這篇文章為例，打開后點(diǎn)擊右上角使用默認(rèn)瀏覽器打開。
2. 右鍵—顯示網(wǎng)頁(yè)源代碼，全局搜索(?+F)var msg。
3. 搜索結(jié)果中，找到 var msg_cdn_url 代碼后面的鏈接，復(fù)制并在新頁(yè)面中打開。
4. 在新的窗口中打開，右鍵就可以保存下來(lái)了，搞定。

到這是不是覺得，哎，學(xué)到了，技能點(diǎn)+1，別急，后面還有更厲害的，同樣也十分簡(jiǎn)單。

Part3.在線編輯網(wǎng)站的素材獲取

更厲害的來(lái)了，在線編輯網(wǎng)站一般會(huì)對(duì)圖片元素做保護(hù)從而讓你不是這么容易的扒到上面的圖片(你懂的)，當(dāng)然了，今天貝叔就教你輕輕松松扒圖。

如下圖，我們用開發(fā)者工具，也選中了圖片，但是發(fā)現(xiàn)不是我們想要的圖片，而是個(gè)透明的圖層，怎么解決呢？

那么，我們「化繁為簡(jiǎn)」4 步解決：

1. 檢視一下右邊的元素，可以發(fā)現(xiàn)是一個(gè)透明的圖層，沒關(guān)系，我們直接 delete 把這一段刪掉。

2. 再選擇中一次，發(fā)現(xiàn)還是沒目標(biāo)圖層，那就繼續(xù)刪直到預(yù)覽窗口出現(xiàn)我們想要的圖片為止。

這里會(huì)有一個(gè)特殊情況，有時(shí)候刪了以后現(xiàn)目標(biāo)圖層沒了，這時(shí)候我們點(diǎn)一下刷新，就全部重置了，然后刪到剛才那一步，點(diǎn)擊 div 容器旁邊的小箭頭展開，就能看到我們想要的圖片了。

△ 有時(shí)會(huì)出現(xiàn)的特殊情況

3. 再選擇中一次，發(fā)現(xiàn)還是沒選中我們想要的圖層，不要慌，重復(fù)上面的操作。

4. 最后，我們拿到了我們想要的圖層，搞定！

這樣就刪除了層層阻礙，我們就得到了想要的圖層，其實(shí)非常非常的容易，拓展小知識(shí)，"div"是個(gè)容器，大家可以理解成「組」，獲取圖片的思路其實(shí)就是把沒用的圖層刪掉。

Part4.網(wǎng)頁(yè)圖標(biāo)獲取

網(wǎng)頁(yè)圖標(biāo)(Favicon)也就是網(wǎng)站的頭像，有些時(shí)候我們可能也需要，怎么弄呢，十分容易。

兩種方法，輕松搞定

方法一：直接在網(wǎng)址后面輸入/favicon.ico，即可獲取網(wǎng)頁(yè)圖標(biāo)

此方法尚存不足，不是所有網(wǎng)站都能這樣操作，部分大網(wǎng)站可以。

方法二：用開發(fā)者工具輕松找到他的圖片鏈接，具體操作如下：

1. 打開開發(fā)者工具(?+?+I)
2. 全局搜索「Favicon」(?+F)
3. 點(diǎn)擊選中的代碼行，右鍵—open in new tab，即可在新頁(yè)面中保存網(wǎng)頁(yè)圖標(biāo)。

那么今天介紹的這四種扒圖的小技巧到這邊就結(jié)束了，非常容易上手，掌握后便可以優(yōu)雅的扒圖了呢，快去試試吧。如果你還有什么扒圖的問題或技巧歡迎留言互相交流。

拓展閱讀：

這里是貝茲嵐，野生互聯(lián)網(wǎng)設(shè)計(jì)師一枚，持續(xù)分享設(shè)計(jì)有用功，我們下期見。