jpg 图片被转换为 webp 格式,如何避免?

2020-01-10 21:16:26 +08:00
 microka
发现有些图床,图片链接结尾是.jpg ,但在 chrome 里面就自动套用了 webp 格式,无论是拖拽到本地或右键另存为,都只能以 webp 格式保存,请问有什么办法能便捷获取原始的 jpg 格式图片?(重点是便捷,别说把链接扔进下载工具……)

Save image as Type
https://chrome.google.com/webstore/detail/gabfmnliflodkdafenbcpjdlppllnemd
这个扩展我用过,但发现其保存的 jpg 图片是经过二次转换的,与原始的 jpg 图片不一致。

示例图片链接
https://i.loli.net/2020/01/04/EgavQRbD9jhoOlT.jpg

求大佬支招,谢谢!
5017 次点击
所在节点    Chrome
13 条回复
Austaras
2020-01-10 21:36:31 +08:00
1. 这和 chrome 无关
2. 它只是名字是***.jpg ,里面是 webp,浏览器还没蠢到看名字认文件类型的地步,而是看 magic number
3. 所以除了二次转换没有别的办法
also24
2020-01-10 21:37:51 +08:00
首先,服务器之所以回复给你 webp,是因为你的 Request Header 里,Accept 里指明了自己支持 webp

打开开发者工具看一下当前的 Accept 字段,我的是这样:
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9


那么只需要找一个修改 header 的工具,例如
https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj

注意:我也是第一次下载这个工具,未检查此扩展是否存在信息泄露等问题,请自己检查。

用工具把 Accept 字段修改为:
text/html,application/xhtml+xml,application/xml;q=0.9,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

强制刷新图片页面,可以看到此时返回的已经是正常的 jpg 图片:
microka
2020-01-10 21:39:27 +08:00
@Austaras 不是啊,直接把这个链接仍去下载器,就能获取原始 jpg 文件,我理解是图床存了一份 webp 格式的副本,当 chrome 这类支持 webp 格式的浏览器访问时就提供 webp 格式的图片。
geelaw
2020-01-10 21:47:43 +08:00
@Austaras #1

1. 这和 Chrome 有关。

如果用 Edge/Chrome 分别右键本帖里的链接另存为,会得到同样 sha256 = 4151434305F6EED9B06892C6CB21526BD744A2BD1471ECE6964FED31B99C6F68 的 jpeg 图片。
如果用 Edge/Chrome 分别打开链接并另存为图片,Edge 会得到和刚刚一样的图片,而 Chrome 会得到 webp 图片。
如果用 Start-BitsTransfer 或者 Invoke-WebRequest 下载,则会得到 jpg 图片。

具体原因是 Chrome 会在请求头里输入 Accept=text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

于是 Cloudflare 会返回 image/webp。

2. 浏览器通过 Content-Disposition 知道扩展名是 webp,Content-Type 知道文件 MIME 类型是 image/webp。当然,可能 Chrome 并不关心来的图片到底是什么格式,直接交给底层渲染器,底层渲染器可能会自动识别。通常来说,如果你把类型写成文本,Chrome 并不会把它看成图片,即使里面包含 magic number。

3. 正确的方法就是右键点链接另存为。
microka
2020-01-10 21:50:18 +08:00
@also24 感谢大佬!成功了!另想请问一下您截图的这个能看 Request Header 信息的界面具体是在哪里?我在 chrome 里面按 F12 调出的界面没找到
![微信截图_20200110214903.png]( )
also24
2020-01-10 21:53:12 +08:00
@microka #5
Network 标签,然后点击具体的请求
microka
2020-01-10 21:57:36 +08:00
@also24 看到了,谢谢!
also24
2020-01-10 22:10:29 +08:00
@geelaw #4

测试了一下右键另存为的方案,确实可行.
抓请求看了一下,发现 Chrome 在右键另存为的请求里,没有指明任何特殊的 Accept 类型。




这里有意思的一点是,如果先右键另存为形成请求缓存之后,再点击这张图会被 304,但是 header 里的 filename 字段还是 “xxx.webp”,此时在页面上另存为会得到一个 webp 后缀的 jpg 图片。

crab
2020-01-10 22:13:55 +08:00
我都是把图片链接用 IE 浏览器打开另存为 jpg
Austaras
2020-01-10 22:58:33 +08:00
@geelaw
1. 只要支持 webp 格式的浏览器行为都是这样,当然和 chrome 无关
2. Content-Disposition 只指示文件名,对浏览器渲染不起指导作用; content type 里有用只有 image,后面的具体格式并不重要。当然你说的改成 text/plain 那是会直接显示文本
microka
2020-03-12 22:14:08 +08:00
@also24 大佬,求帮忙看看 https://hdchina.org/attachments/202003/202003072313578dd932ff2484839663addfa7ceb50637.jpg 这个链接,更改了 Accept 字段也不行,就算添加 "image/jpeg" 也不行。
also24
2020-03-12 23:14:07 +08:00
@microka #11
你有没有想过这其实就是一张写错了后缀的 webp ?
microka
2020-03-12 23:33:49 +08:00
@also24 还真是!哈哈哈感谢!思维盲区了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/636974

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX