前端开发如何抠图

对于很多初学者,我们在进行前端页面开发的过程中,我们首先会模仿一些网站写一些界面。从而会经常遇到需要获取一些图片资源。此时我们想到的最快的方式就是直接到该网站抠图.

举个简单的例子,比如我们想到模仿淘宝网的首页,我们可以打开淘宝,想要获取到下图红色框里面的图片。

前端开发如何抠图_第1张图片

可以直接右键,选择复制图片,此时就可以获取到该图片。

前端开发如何抠图_第2张图片

这是一种简单粗暴的方法,除此之外我们还可以按照程序员的方式获取图片。

选中该图片右键,选择检查,查看网页源代码

前端开发如何抠图_第3张图片

看到在页面底部,出现显示该图片的代码

前端开发如何抠图_第4张图片

选中显示图片的代码,右键选择open

前端开发如何抠图_第5张图片

进去显示整张图片,右键选择save

前端开发如何抠图_第6张图片

这样我们就把该图片保存下来了。

在下载的文件夹中就找到刚下载的图片

前端开发如何抠图_第7张图片

前端开发如何抠图_第8张图片

将该图片名第一个jpg后面的字符去掉,保存为以.jpg结尾。这样我们就获得了想要的图片。

对于一些不能直接右键查看源代码的网站,我们可以通过Command+Option+I打开控制台。并按上述方法进行抠图。

你可能感兴趣的:(前端开发如何抠图)