掌握这4个小技巧，全网高清图片任意存！

大家好，这是贝兹兰，野生互联网设计师~

现在打开网站寻找参考是许多设计师打开电脑的第一件事，贝叔叔也是如此。每当你遇到一些好看的图片，你总是想把它们捡起来放在你自己的库里。下次你有类似的需求时，你可以快速查看，并为自己提供想法。

既然大家都知道建立个人图库的重要性，又回到了图片的来源，怎样才算优雅呢？

不是所有网站的图片都可以右键保存，问开发兄弟吗？ 第一，他们很忙，可能没时间理会。第二，如果这个问题太基础，就会被鄙视。

本文结合 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 当容器旁边的小箭头展开时，我们可以看到我们想要的图片。

△ 有时会出现特殊情况

3. 再选一次，发现还是没有选择我们想要的图层，不要慌，重复上面的操作。

4. 最后，我们得到了我们想要的图层，完成了！

这样就删除了层层障碍，我们就得到了想要的图层，其实很容易扩展小知识，”div“它是一个容器，可以理解为「组」，获取图片的想法实际上是删除无用的层。

Part4.获取网页图标

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

这两种方法很容易完成

方法一:直接在网站后面输入/favicon.ico，网页图标即可获得

这种方法还是不够的，不是所有的网站都能这样操作，有些大网站可以。

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

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

所以今天介绍的四个提示结束了，很容易开始，掌握后可以优雅的提示，去试试。如果您有任何问题或技能，请留下评论并相互交流。

拓展阅读：

这是贝兹兰，野生互联网设计师，继续分享设计是有用的。下次见。