如何获得不能另存为的网络图片

相信大家在平时浏览网页的时候会碰到一些特别有好感的图片,又或者觉得这张图片很适合也作为展示素材的时候,就会把习惯性地点开鼠标右键,等待下面的菜单选项出现:

但是,有一些图片,鼠标右键一点,咦?怎么没有图片另存为?

图片截取自爱奇艺

这个时候大部分人都会知难而退,然后打开截图软件,截图,保存,完毕。

嗯~ 一切看似很顺利,但是如果有东西遮挡的时候呢? 看一下厚朴主站的底部:

不仅有很多的字体,还有一些图片,按钮遮住了图片

这下子,截图也没办法╮(╯_╰)╭了

这里,我们介绍一种方法,轻松获得上述这种难以获得图片。

img标签

这就要从一个img标签说起。

首先,平时我们所见到的可以另存为的图片是在html代码中以img标签形式出现的。

嗯?这是什么意思呢?

我们来看一下百度图片的网页的部分截图:

图片截取自百度图片

里面的图片都是由以下格式的html代码表示的:

其中第一幅图片的html代码是:

这里我们想到,我们可以通过标签里面的图片地址来获得相应的原图呀。嗯,没错,我们在地址栏输入上述图片地址(src),然后出现了这张图片的原图。

可是每次都要这样做岂不是很麻烦?其实浏览器已经帮我们做好了,就是图片另存为。

background-image属性

但是有一些不是上述格式的img的html代码也可以渲染成一张图片,它在html的表示跟其他标签一样,如厚朴主站底部图片的html代码:

为什么它没有图片地址却可以渲染成一张图片,图片是从哪里来的?

回答这个问题的关键就是CSS中的一个background-image属性。

从字面上的意思就是背景图片的意思,也就是说,这张图片在这里充当的是背景而不是主体。

CSS中通过以下语法定义background-image

也就是说我们通过找到CSS里background(-image)里的图片地址就可以找到原图了。

展示技术的时候到了

首先我们打开开发者工具,本人使用的是chrome浏览器,在浏览器内按鼠标右键—检查或者直接按F12

然后找到相应的html代码,当你找到某一个html标签的CSS属性里有图片地址,那就大功告成了。以下为厚朴主站底部图片的位置:

接下来的可以将图片放进地址栏(有时候直接在地址后面添加即可)进行访问

还可以通过浏览器自带的功能进行访问图片:

在url里面点击鼠标右键,出现菜单:

点进去之后就可以直接保存原图了。

当然你可以直接打开开发者工具,在Sources—Network里寻找目标图片(字体或者其他)

彩蛋

其实区分上述两种不同图片的方法很简单:就是按住图片,看一下能不能拖动图片,可以拖动图片的就是img标签类型,不能拖动或者拖动后只有一些文字链接的就是CSS属性定义的图片。

希望上述方法可以帮助你保存到你想要的图片。Good Luck!

END

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180711B0P8LS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券