运行在浏览器中的图片格式转换工具，以 wasm-vips 作为图片处理引擎
MossFox · MossTheFox · 2023-01-29 03:29:53 +08:00 · 2488 次点击这是一个创建于 659 天前的主题，其中的信息可能已经有所发展或是发生改变。
👉 网页应用地址： 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 。
挺希望做出的工具可以让人们凭借直觉就能够用起来，不过，看上去这个界面还是不是很简洁。如果感觉有不合理的地方，也希望可以提出来看看。我自己目前的经验还是挺有限的。
 |
1
12101111 2023-01-29 08:41:24 +08:00
24000 x 20000 的图片内存占用超过了 4GB?
|
 |
2
tool2d 2023-01-29 09:48:55 +08:00
OP 应该换成 electron 开发的，这样能解决商业问题，让用户付费，让软件开发能持续下去。
然后把 wasm 整个模块去掉，直接换成调用 exe 命令行处理图片，这样处理大图片也没有任何问题了。 |
 |
3
MossFox OP @12101111 引擎报错，应该不是达到了浏览器内存限制，更像是在动态申请内存时达到了 Emscripten 设立的限制（不确定）。因为没有自己编译测试，出错的位置只能定位到 vips_write_to_buffer (输出) 这一步。
指定输出 webp ，可以很快捕获到 OOM 错误，但用例如 JPG 输出的话，似乎直接就冻住了，资源管理器里面内存上升的 1GB 左右内存降下来之后，运行引擎的 worker 依然是阻塞状态。 用相同内核版本的命令行工具在本机进行转换并不会这样，速度很快、而且也没有观察到夸张的内存占用（ vips 本身不会整个地把图片读入内存）。 所以，这大概是 WebAssembly 版本特有的问题。因为大约算是极端情况，所以也没有去细究。 |
|
4
MossFox OP @tool2d 确实，如果调用原生 exe 的话效率和稳定性会高很多，而且文件系统访问也更方便。
不过，处理图片的原生应用已经挺多的了，这个网页应用我一开始想的是看看能不能把一些基础功能直接搬到浏览器中运行，毕竟浏览器在各个平台上都有稳定支持、而且网页应用可以即用即走。所以就这么做下来了。 |
 |
5
dimlau 2023-01-29 10:57:23 +08:00
想到了这个：
https://fileconverter.digital/ |
 |
6
okakuyang 2023-01-29 12:06:53 +08:00
除了 avif ，浏览器原生支持 jpg png webp 。
不足的就是浏览器原生支持的分辨率有上限。 |
|
7
okakuyang 2023-01-29 17:11:10 +08:00
仔细看了一下 wasm-vips ，用了多线程和 simd ，应该是挺完善了。
|
 |
8
haoxuexiaoyao 2023-01-30 15:41:00 +08:00
透明图不能一键白底么
|
|
9
MossFox OP @haoxuexiaoyao 转 PNG 或者 WEBP 的时候在输出设置展开的菜单那边，选择丢掉透明度信息就好。
不过，对于 PNG 可能反而会让图片体积增加，这个和当前用的处理引擎编译的版本不支持压缩成 PNG8 有关，貌似是因为 license 的原因没有内置。 对于一些图片文件的快速操作，之后有细节想法了的话可能会加进去，方便处理图片的时候可以跳过那一长串设置菜单。 |
 |
10
YahWx 2023-01-30 23:07:16 +08:00 via Android
👏👏👏有趣
|
 |
11
jackrebel 2023-01-31 15:28:59 +08:00
|
Select Language