运行在浏览器中的图片格式转换工具,以 wasm-vips 作为图片处理引擎

查看 14|回复 0
作者:MossFox   

👉 网页应用地址: img.mowl.cc
(Cloudflare CDN) (建议使用桌面端浏览器访问)
(首次开始任务时的等待时间略长可能是在等待 WebAssembly 模块加载)
浏览器兼容性问题:请留意进入页面后弹出的浏览器兼容性提示(若有)。截至发帖,Safari 浏览器的稳定版由于一个已知问题而无法正常运行此程序(具体可以参考 wasm-vips 的 README 提供的信息。最新的预览版可能已修复)。
代码仓库: https://github.com/MossTheFox/owl-image-tools
(MIT)
这是什么
一个运行在浏览器中的简单的图片格式转换工具。已经支持将常见格式转换为 JPG, PNG, GIF 和 WEBP 。
图片处理由很厉害的 libvips 的分支 wasm-vibs 提供。在下一个版本中应该会支持 AVIF 格式。如果确定,此网页应用也会同步进行一下更新。
wasm-vibs 是 libvips 借助 Emscripten 编译到 WebAssembly 的图片处理引擎,可以运行在浏览器环境与 Node.js 下。
长什么样
有许多细节的地方,可以前往应用页面亲自摸一摸。



有什么用
目前大概是只能转换图片。对于已经支持的格式里面,可能转 WEBP 是最有用的。可以选择有损或者无损编码,动态图片也应该支持( APNG 不支持……)。
输入和输出的文件列表上,可以右键呼出菜单。输出的图片可以和原图进行对比。另外,输出列表的文件夹可以打包为 ZIP 进行下载。
有一些 libvips 本身不支持的格式,会借助浏览器来将图片画到 Canvas 上、然后用导出的 PNG 进行后面的转换。例如,虽然目前使用的 libvips 不支持 AVIF 格式,但 Firefox 可以解码这种图片类型。这样,你也就可以把 AVIF 类型的图片转换成其他常用格式了。
libvips 是很强大的图片处理引擎,如果感觉有什么可以做到网页上的功能,也可以告诉我一下。
相比常见的程序,有什么特点
最大的特点应该就是直接运行在浏览器环境中,且所有处理工作均在本地完成
常见的在线图片处理工具,大多都有一个上传到服务端的步骤。即使服务提供方兑现了不存储用户文件的承诺,有时候半个屏幕的广告也看着挺难受。
这个工具大概就是本着实用性角度出发来做的。不过,目前功能还是很有限。
对于不同尺寸的屏幕也有相应的适配。
简洁一点地说……
  • 支持 PWA 和离线使用(借助 Service Worker 提供的缓存);
  • 没有后端,没有各种分析程序脚本,很纯粹的一个纯客户端运行的工具;
  • 界面尽可能打造得能看了;
  • 大批量的图片处理在支持文件系统访问的浏览器上不会出问题,且内存占用不增长(目前测试过沙雕图站点的 6000 张图,在低压 U 笔记本上大约两小时全部转为了 WEBP );
  • ……明暗主题这个,应该是标配了,就不算是特点了吧;
  • 可以在左上角的设置菜单中,清除所有由此应用主动创建的数据(包括 Service Worker 缓存和 Origin Private File System ,后者原本是为 Safari 下的大批量文件转换准备的,但目前由于前面提过的问题,暂时没有充分测试)。

    已知问题
  • Safari 浏览器下,还没有进行过完成的测试(目前稳定版暂时无法运行处理引擎);
  • 移动端浏览器不支持文件夹选择( iOS 似乎支持拖入文件夹),选择文件夹的控件未隐藏;
  • 代码质量可能很尴尬,已经没有太多时间可以用在做摸鱼项目上面了,所以此应用在开发时的风格大概就是一路乱撞;
  • 文件列表对于预览几千个项目并不会发生页面卡顿,但可能会有短暂空白,且如果有复杂的文件夹结构,滚动时可能会有些抽风(与 Lazy load 的实现有关);
  • 对于尺寸非常巨大的图片…… 呃,会出现来自 Emscripten 的 OOM (Out of Memory) 错误并冻结处理引擎。为了避免炸掉你的浏览器,目前 wasm-vips 会在一个 Web Worker 里面启动。但 OOM 是没法避免的,所以不要用像是那张 24000 x 20000 的旷野之息大地图来测试了,真没法整。

    移动端 Safari 除了 WASM 兼容性以外,还有一个右键菜单不可以通过长按呼出的问题。这个会在确定 Safari 可以运行图片处理引擎之后进行修复。
    可能有一些自己没有测试出来的问题。如果发现 bug 、需要帮助或是有功能建议之类,可以告诉我一下,或者在代码仓库那边提出 issue 。
    挺希望做出的工具可以让人们凭借直觉就能够用起来,不过,看上去这个界面还是不是很简洁。如果感觉有不合理的地方,也希望可以提出来看看。我自己目前的经验还是挺有限的。
  • 您需要登录后才可以回帖 登录 | 立即注册

    返回顶部