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

2,157 阅读2分钟

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

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

Q&A:为什么要抠图?

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

Q&A:如何抠图?

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

Smartisan.png

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

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

检查.png
2.点击检查以后出现以下界面,再点击我红色方框和箭头所指的按钮。
查找.png
3.点击上方按钮以后鼠标会变成一个圆圈,此时移动鼠标到你要选择的素材上方。再回到右侧一个以.png结尾的链接上,把鼠标停在上方,就会出现如右图所示一个小弹窗。
定位.png
4.此时在链接上右键,就会出现如下图所示菜单项,点选Open Link in New Tab。
锁定.png
5.进到这个界面,你已经拿到需要的图片了。直接右键另存为图片就可以了。
成功.png

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

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

检查.png
2.在右上角点击Resource。
Srouce.png

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

定位.png
4.最后,在需要的素材图片上右键,点选Open Link in New Tab。
成功

NewPan 的文章集合

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

NewPan 的文章集合索引

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