大家好，這里是貝茲嵐，野生互聯網設計師一枚~

現如今打開網站找參考已經是很多設計師打開電腦的第一件事了，貝叔也是如此，但凡遇到點好看的圖片總會想著扒下來放在自己的庫里，下次有類似的需求時候就可以快速查看，給自己提供思路。

既然都知道建立個人圖庫的重要性，回歸到圖片的來源，怎么扒才算優雅呢？

不是所有網站的圖片都能右鍵保存的，去問開發小哥么？ 一來，他們很忙可能沒空理會，二來，這個問題太基礎會被鄙視。

本文結合 4 種需要扒圖的場景，提供如何獲取的小技巧：

• 圖庫網站的圖片獲取
• 公眾號頭圖獲取
• 在線編輯網站的素材獲取
• 網頁圖標獲取

Part1.圖庫網站的圖片獲取

以國外某某著名圖庫為例子，比如我們看到一張不錯的風景圖，點擊右鍵沒有保存菜單，而且不管對圖片進行怎么樣的交互動作，均不會出現右鍵菜單，這是很典型的圖片保護了。

那么，先來一個基本操作 3 連搞定：

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

同學們可能會覺得，就這？對，沒錯，就是這么簡單，基本操作。

Part2.公眾號頭圖獲取

很多時候我們看到公眾號的頭圖，想收下來，但是點擊詳情頁之后，頭圖是看不見的，怎么獲取呢？

當然，很多公眾號的插件可以做這些事，比如什么壹伴插件啦，但貝叔的觀念是學一點技術，萬一呢，Always have plan B。

那么，我們來個「曲線救國」4 步搞定它：

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

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

Part3.在線編輯網站的素材獲取

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

如下圖，我們用開發者工具，也選中了圖片，但是發現不是我們想要的圖片，而是個透明的圖層，怎么解決呢？

那么，我們「化繁為簡」4 步解決：

1. 檢視一下右邊的元素，可以發現是一個透明的圖層，沒關系，我們直接 delete 把這一段刪掉。

2. 再選擇中一次，發現還是沒目標圖層，那就繼續刪直到預覽窗口出現我們想要的圖片為止。

這里會有一個特殊情況，有時候刪了以后現目標圖層沒了，這時候我們點一下刷新，就全部重置了，然后刪到剛才那一步，點擊 div 容器旁邊的小箭頭展開，就能看到我們想要的圖片了。

△ 有時會出現的特殊情況

3. 再選擇中一次，發現還是沒選中我們想要的圖層，不要慌，重復上面的操作。

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

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

Part4.網頁圖標獲取

網頁圖標(Favicon)也就是網站的頭像，有些時候我們可能也需要，怎么弄呢，十分容易。

兩種方法，輕松搞定

方法一：直接在網址后面輸入/favicon.ico，即可獲取網頁圖標

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

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

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

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

拓展閱讀：

這里是貝茲嵐，野生互聯網設計師一枚，持續分享設計有用功，我們下期見。