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

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

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

Q&A&＃xff1a;为什么要抠图&＃xff1f;

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

Q&A&＃xff1a;如何抠图&＃xff1f;

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

方式一&＃xff1a;精确定位单一元素

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

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

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

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

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

方式二&＃xff1a;拿到网页所有图片元素

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

2.在右上角点击Resource。

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

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

NewPan 的文章集合

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

NewPan 的文章集合索引

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