V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
debuggerx
V2EX  ›  问与答

用 go 写了个把静态博客中 webp 图片在线转为 jpg 的工具,不知道有人需要吗

  •  
  •   debuggerx · 2020-11-23 20:36:06 +08:00 · 1122 次点击
    这是一个创建于 1242 天前的主题,其中的信息可能已经有所发展或是发生改变。

    起因

    不久前决定开始写博客了,选了 Hexo + Butterfly 主题 + GitHub pages 的方案,总体还是很满意的: https://www.debuggerx.com

    很多人建站或者弄博客,喜欢使用图床,但是看到很多稍微老一点的文章,经常碰到“裂图”,要么是图床崩了、关服了,或者服务条款变了,甚至是图床服务器事故资料丢失,这对于想把博客作为长期信息记录的目的来说过于冒险,同时考虑使用的便捷性、迁移的安全性和管理的可控,最后我想干脆就把图片文件直接存博客里吧,配合 post_asset_folder: true 的选项后还是很方便的。 这样一来,为了减小 git 仓库的大小,以及优化网站的加载速度,尽量地压缩图片大小就非常必要了,所以我的博客里大量使用了 webp 格式的图片,相比 jpg 和 png 图片大概能省一半左右的空间。我平时常用的开发环境是 Linux,手机 Android,直到有一天用 iPhone6 测试机测完刚写的 Flutter 项目新功能,随手打开博客看了下,才发现:

    before

    包括博客的背景图、文章的封面图、头像,只要是使用了 webp 格式,要么显示了主题设置的加载错误图,要么直接不显示,这、这、这……

    解决方案

    1. 在网上和 v 站内搜索,多数解决这个问题的方案都是使用 oss,使用对象存储提供的转格式 api,这个我之前做过的 app 中用过七牛云,确实很方便;还有一种是每张 webp 图片都再存一份其他格式的——这两种方案对我现在静态部署的博客来说显然都不合适

    2. 使用 webpjs , 只要网页中引入这个库,就可以在不支持的设备上通过 js 解码 webp,再将解码后的图片数据用 data base64 的方式塞回图片的 src 来实现图片的正常显示。这种我也试过了,确实可以显示图片了,但是问题在于如果页面中 webp 的图片过多或者尺寸过大,解码速度可能很慢,期间页面会阻塞,体验很差,而且这样的方式解码页面以后,用 Mac 的 safari 打开开发者工具面板都能卡上十几秒,所以也放弃。

    3. 最后想来想去,想要通过 api 的方式在线将 webp 的图片转为 jpg,搜索了一下貌似没找到类似的成品,遂决定自己动手撸一个~

    效果

    after

    简单说下思路,其实也很简单,就是在博客的每个页面加载完之后立即执行一段 js,判断设备如果不支持 webp, 就获取页面上所有的图片元素,如果其地址是 webp 格式,就在地址前面拼上转码 api 的路径,假设原图片地址是 http://xxx.com/bg.webp ,就把它变成 http://webp2jpg.com/?http://xxx.com/bg.webp;服务端接收到请求,从 query 中拿到原始图片地址,下载后解码再用 jpg 格式编码返回,这样网页实际下载到的图片就可以直接显示了;服务端也做了简单的缓存,同一张图片第一次解码后会缓存下来,之后直接返回缓存文件:

    发帖的目的是看看大家对这个东西的态度,有没有需求,因为代码本身很少就写了一会儿,就已经满足了我自己的需求,但是如果想要拿出来给别人用还需要修改添加很多东西,不想浪费精力发出来没人用,毕竟 Safari 14 也已经支持 webp 了,随着苹果系统更新这个问题终将成为历史的尘埃,So ~

    第 1 条附言  ·  2020-11-24 11:34:32 +08:00
    图裂了……重发-_-||
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2490 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 16:08 · PVG 00:08 · LAX 09:08 · JFK 12:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.