[UI]如何优雅地抠网页上的图片

"优雅是唯一不会褪色的美。" -- 奥黛丽 · 赫本

多图预警：在蜂窝网络下请谨慎打开。本文所使用的系统为苹果Capitan下的Chrome浏览器。

Q&A：为什么要抠图？

当你在某个网站上看到一张很漂亮的壁纸时，很自然的你想把它下载下来，试试看做桌面背景合不合适。可此时你右键，发现并没有“图片另存为”的选项，这个时候你会怎么做？

Q&A：如何抠图？

比如说我们来到锤子科技的首页，你想把这张图片保存下来，但是右键并没有“图片另存为的选项”。而我现在说的，就是如何在这种情况下仍然能拿到原图。

方式一：精确定位单一元素

1.在chrome中右键出现右键菜单栏。此时点击最下方的检查。

2.点击检查以后出现以下界面，再点击我红色方框和箭头所指的按钮。

3.点击上方按钮以后鼠标会变成一个圆圈，此时移动鼠标到你要选择的素材上方。再回到右侧一个以.png结尾的链接上，把鼠标停在上方，就会出现如右图所示一个小弹窗。

4.此时在链接上右键，就会出现如下图所示菜单项，点选Open Link in New Tab。

5.进到这个界面，你已经拿到需要的图片了。直接右键另存为图片就可以了。

方式二：拿到网页所有图片元素

1.在chrome中右键出现右键菜单栏。此时点击最下方的检查。

2.在右上角点击Resource。

3.点击Resource来到当前界面，再选择frames，依次展开，找到images，再展开images，最后在所有元素中查找你需要的元素。

4.最后，在需要的素材图片上右键，点选Open Link in New Tab。

NewPan 的文章集合

下面这个链接是我所有文章的一个集合目录。这些文章凡是涉及实现的，每篇文章中都有 Github 地址，Github 上都有源码。

NewPan 的文章集合索引

如果你有问题，除了在文章最后留言，还可以在微博 @盼盼_HKbuy 上给我留言，以及访问我的 Github。