https://tuchong.com/1181287/12974705/

怎么从这网页里面提取这个图片? 截图是一种方法,但不是最佳。

此网页对右键进行了屏蔽处理，我们通过右键保存图片是不可取的。

既然网站禁止了右键,我们也不用额外的下载工具,直接手工进行查找下载:

现在Chrome为例 (别的浏览器也大同小异而已)

禁止右键:

我们按F12键进入开发者工具:

(Google Chrome开发者工具是内嵌到浏览器的开发工具,打开方式有两种：第一“按F12”，第二：shift+ctrl+i)

选择左上角的 元素选择器, 然后在网页上移动. 它会告诉你当前鼠标所在部分对应的网页源代码

然后慢慢寻找这个图片所在的位置吧

或者直接从Elemetes中,寻找源代码所对应的图片

还可以从Sources资源列表中,寻找网页中的图片,视频,音频等元素

我们发现,此图片存储的是 webp格式,我们还需要借助工具,将它转化为我们日常中常用的jpg等

https://photo.tuchong.com/1181287/f/23795518.webp

我们直接可以借助 Chrome 进行格式转换:

在浏览器中,输入上述图片网址,便可以打开图片.

然后,我们在地址栏中,将后缀名改为jpg,即为:

https://photo.tuchong.com/1181287/f/23795518.jpg

然后右键,保存为jpg即可

此方法适应大多数的图片视频下载方式.(某些视频会进行加密处理,又是另一回事了)

(懂一些HTML语法还是蛮实用的.毕竟要天天在网上泡着……HTML也容易学)

————————————————-

(WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。但WebP是一种有损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。)

————————————————-

附: F12 Google Chrome开发者工具 简介

Console
Console可以查看网页运行后提示的消息，错误或者警告以及输出内容等，网页后台可以使用Console.debug("输出内容")；来在Console输出显示，可以做到调试的作用吧，不过一般真正调试不是拿Console。console.debug("Console使用介绍");console是小写形式，不然提示没有Console

Resources
Resources里可以查看web程序跑起来后所加载的一些资源（Resources），包括图片或者其他“值”，以及Cookies
Sources
Sources可以查看运行的脚本，调试一般都是在Sources调试的，所以程序开发者需要了解和熟悉Sources的使用
Sources
在左侧的脚本代码编号，鼠标点击即可添加断点，添加断点后，刷新网页，程序运行到断点即可看到断点调式的状态了，具体调试需要在自己想查看某个方法里边是否有问题，一步步排除，效果很好
NetWork
NetWork可以看到网页加载的脚本和资源的时间，还可以看到某些不能加载成功的资源；这里有位是百度首页演示，百度首页内容很干净所以不需要加载什么图片等资源
Elements
Elements这个就比如页面的每个元素吧，比如百度搜索这个图片，可以通过Elements找到，搜索框也可以，在底下的“放大镜”类似的控件，点击然后选择自己想要查看要素或位置，Elements会跳转到相应的实现代码