关闭

如何下载网页中的图片

223人阅读 评论(0) 收藏 举报
分类:

http://qzher.com/?p=218


如何下载网页中的图片

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会跳转到相应的实现代码

 

类别:   软件 Edit
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9245次
    • 积分:262
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:2篇
    • 译文:0篇
    • 评论:3条
    文章分类
    文章存档