大家好，这里是贝兹岚，野生互联网设计师一枚~

现如今打开网站找参考已经是很多设计师打开电脑的第一件事了，贝叔也是如此，但凡遇到点好看的图片总会想着扒下来放在自己的库里，下次有类似的需求时候就可以快速查看，给自己提供思路。

既然都知道建立个人图库的重要性，回归到图片的来源，怎么扒才算优雅呢？

不是所有网站的图片都能右键保存的，去问开发小哥么？ 一来，他们很忙可能没空理会，二来，这个问题太基础会被鄙视。

本文结合 4 种需要扒图的场景，提供如何获取的小技巧：

图库网站的图片获取
公众号头图获取
在线编辑网站的素材获取
网页图标获取

Part1.图库网站的图片获取

以国外某某著名图库为例子，比如我们看到一张不错的风景图，点击右键没有保存菜单，而且不管对图片进行怎么样的交互动作，均不会出现右键菜单，这是很典型的图片保护了。

那么，先来一个基本操作 3 连搞定：

在 Chrome 浏览器中，打开开发者工具（快捷键 ⌘ +⌥+ I）。
点击元素选择工具(快捷键，⌘ + ⇧ + C)，并选中想要图片并点击。
在右侧高亮代码行中，右键—Open in new tab；或者直接双击超链接，复制后再新页面打开， 然后保存(ps：预览窗口的图片可以直接拖到本地哦)，搞定。

同学们可能会觉得，就这？对，没错，就是这么简单，基本操作。

Part2.公众号头图获取

很多时候我们看到公众号的头图，想收下来，但是点击详情页之后，头图是看不见的，怎么获取呢？

当然，很多公众号的插件可以做这些事，比如什么壹伴插件啦，但贝叔的观念是学一点技术，万一呢，Always have plan B。

那么，我们来个「曲线救国」4 步搞定它：

复制文章链接，在浏览器中打开.以这篇文章为例，打开后点击右上角使用默认浏览器打开。
右键—显示网页源代码，全局搜索(⌘+F)var msg。
搜索结果中，找到 var msg_cdn_url 代码后面的链接，复制并在新页面中打开。
在新的窗口中打开，右键就可以保存下来了，搞定。

到这是不是觉得，哎，学到了，技能点+1，别急，后面还有更厉害的，同样也十分简单。

Part3.在线编辑网站的素材获取

更厉害的来了，在线编辑网站一般会对图片元素做保护从而让你不是这么容易的扒到上面的图片(你懂的)，当然了，今天贝叔就教你轻轻松松扒图。

如下图，我们用开发者工具，也选中了图片，但是发现不是我们想要的图片，而是个透明的图层，怎么解决呢？

那么，我们「化繁为简」4 步解决：

1. 检视一下右边的元素，可以发现是一个透明的图层，没关系，我们直接 delete 把这一段删掉。
2. 再选择中一次，发现还是没目标图层，那就继续删直到预览窗口出现我们想要的图片为止。

这里会有一个特殊情况，有时候删了以后现目标图层没了，这时候我们点一下刷新，就全部重置了，然后删到刚才那一步，点击 div 容器旁边的小箭头展开，就能看到我们想要的图片了。

△ 有时会出现的特殊情况

1. 再选择中一次，发现还是没选中我们想要的图层，不要慌，重复上面的操作。
2. 最后，我们拿到了我们想要的图层，搞定！

这样就删除了层层阻碍，我们就得到了想要的图层，其实非常非常的容易，拓展小知识，”div”是个容器，大家可以理解成「组」，获取图片的思路其实就是把没用的图层删掉。

Part4.网页图标获取

网页图标(Favicon)也就是网站的头像，有些时候我们可能也需要，怎么弄呢，十分容易。

两种方法，轻松搞定

方法一：直接在网址后面输入/favicon.ico，即可获取网页图标

此方法尚存不足，不是所有网站都能这样操作，部分大网站可以。

方法二：用开发者工具轻松找到他的图片链接，具体操作如下：

打开开发者工具(⌘+⌥+I)
全局搜索「Favicon」(⌘+F)
点击选中的代码行，右键—open in new tab，即可在新页面中保存网页图标。

那么今天介绍的这四种扒图的小技巧到这边就结束了，非常容易上手，掌握后便可以优雅的扒图了呢，快去试试吧。如果你还有什么扒图的问题或技巧欢迎留言互相交流。

拓展阅读：

这里是贝兹岚，野生互联网设计师一枚，持续分享设计有用功，我们下期见。

作者： 贝兹岚庭叙