从浏览器保存的图片打不开,该咋办?

简介: 从浏览器保存的图片打不开,该咋办?

今天来聊聊「图片格式」的话题——使用 Chrome 浏览器的朋友,可能遇到过这么一种情况:从浏览器保存到本地的图片,格式不是常见的 jpg/jpeg/png/gif,而是 webp。 就像下面从 Chrome 保存到素材管理软件 Eagle 中的图片,格式都为 webp。   641749b5fa5cf9a1df6f2130f00e2a15_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpgwebp 是谷歌推出的一种图片格式,在网页上使用这种格式,可以提升图片的加载速度,但保存到本地,尤其是 Windows 系统,使用系统自带的「照片」,就无法顺利打开。 对于这个问题,我来提供几个可供采用的方法,希望能帮到遇到相同问题的朋友。

01 浏览器开发者工具

在浏览器中按下 F12 键,打开下方的「开发者工具」,你会看到一团密密麻麻的代码。 代码看不懂不要紧,只需要着重看一个字段 href,以及等号后面以 .jpg 或者 .jepg 的链接,将鼠标移动到链接上方,还会显示图片链接的预览图。 通过预览图找到想保存的图片,直接点击链接,会在浏览器中打开一个新的页面。   287d43d73a9dd2c56621453fdf761e43_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg在打开的新标签页顶部,可以看到当前图片的格式为 jpg,右击选择「图片存储为」,图片就会以 jpg 的格式保存到本地。 0c3d9a60760cd825b0dd1c5f05a7f612_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

02 浏览器插件

第 1 个方法还是有些麻烦,我们可以使用一种更为简单的方法:安装浏览器插件「图片另存为 JPG/PNG/WebP」。 安装插件之后,浏览器右键菜单会多出一个选项,在保存图片时可以选择保存的图片格式。 ee5ce231fb1a1a883fc4de0c08ff2581_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

03 素材管理工具 Eagle

这是一个「曲线救国」的方法。 前面说到,我会把在网上看到的一些图片,通过素材管理工具 Eagle 的插件保存到 Eagle 客户端。 514cc9571be56f7641e463fa5cca88bd_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg使用 Eagle 插件保存网页图片很方便,但它还是存在一个问题,采集到的不少图片格式都为 webp…  502ffeeefbfb3eecd1d35cca08a7733f_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg不过,比较欣慰的是,Eagle 还给我们留了一条后路: 将保存在 Eagle 的图片导出到指定文件夹时,可以指定导出的图片格式777640b2387da1c682720fc91f3b8327_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg导出时默认的图片格式为 JPG,即便原先是 webp 格式的图片,借助 Eagle 的导出功能,也可以得到兼容性更好的 jpg 格式。 如此一来,Eagle 的导出功能,相当于是一个隐形的图片格式转换工具了。    eb533547873224751b31404b664e4026_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

04 图片格式转换工具

最后再介绍一种很常规的方法,使用图片格式转换工具,将 webp 转换为想要的图片格式。 图片格式转换,推荐一个开源的免费工具——洋芋田图像工具箱,软件支持 Windows 和 macOS 系统。 软件功能很全面,既有我们这里需要的格式转换,还有其他你可能会用到的功能,不多介绍了。   f2bf95cbc7b166a44f8628d43f9deb0d_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg洋芋田图像工具箱:
https://www.potatofield.cn/imagetoolkit/    
以上,就是本次想和你分享的内容。      


相关文章
|
7月前
|
计算机视觉 C++
基于Qt的简易图片浏览器设计与实现
基于Qt的简易图片浏览器设计与实现
327 1
|
JavaScript 对象存储
在阿里云OpenAPI 为什么oss 图片链接, 在浏览器访问直接下载了,不是预览呢?
在阿里云OpenAPI 为什么oss 图片链接, 在浏览器访问直接下载了,不是预览呢?
1508 1
|
4月前
|
XML 缓存 JSON
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
297 0
|
6月前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
142 1
使用 JS 实现在浏览器控制台打印图片 console.image()
|
5月前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
162 0
|
6月前
|
缓存 算法 API
视觉智能开放平台产品使用合集之如何在Web浏览器中查看处理后的图片
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
166 0
|
7月前
|
计算机视觉
关于人脸识别最近浏览器打不开摄像头的解决方案
关于人脸识别最近浏览器打不开摄像头的解决方案
|
7月前
|
域名解析 应用服务中间件 对象存储
解决阿里云oss图片浏览器访问直接下载而不是打开
解决阿里云oss图片浏览器访问直接下载而不是打开
4091 0
|
7月前
|
移动开发 JavaScript
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
277 0
|
开发者
【浏览器按F12打不开开发者工具(兼容模式打开处)】
【浏览器按F12打不开开发者工具(兼容模式打开处)】
515 0
【浏览器按F12打不开开发者工具(兼容模式打开处)】