Y Yuan Tools
2026/7/13

第十九个工具：图片格式转换器，从本地批量转换到发布验证

记录图片格式转换器 v0.1.0 的设计、发布和站点接入：本地批量转换、Web/Tauri 双端交付、GitHub Release 资产与生产子路径验证。

第十九个工具：图片格式转换器，从本地批量转换到发布验证

这次做的是一个很基础、但很容易被反复用到的小工具：图片格式转换器。

它解决的问题很直接：把 JPG、PNG、WebP 图片批量转成另一个格式，尽量不上传、不依赖后端，也不让用户为了几张图片打开笨重的软件。这个工具的项目仓库是 yuan-image-converter，第一版发布为 v0.1.0。

这版先做成一个可靠的小工作台

我这次没有做成一个“上传框加一个按钮”的简单页面，而是做成了一个批量处理工作台：

  • 支持 JPG、PNG、WebP 输入。
  • 输出格式支持 PNG、JPG、WebP。
  • 单次最多 30 张，单张最大 40 MB。
  • WebP/JPG 可以调质量，JPG 可以设置透明背景填充色。
  • 每张图独立显示状态，失败项可以单独重试。
  • 成功项可以单张下载，也可以打包成 ZIP。

我比较在意的一点是：转换过程要可见。最后队列里会显示“PNG / 68 B → WebP / 结果大小”，而不是只告诉用户“转换成功”。这类小细节不复杂，但会让工具更像一个真正可用的产品，而不是一次性 demo。

为什么坚持本地处理

图片工具天然会碰到隐私问题。证件照、截图、聊天记录、设计稿，都可能不适合上传到别人的服务器。

所以这版继续沿用 Yuan Tools 的默认方向：浏览器端本地处理，桌面版也不依赖远程后端。核心转换逻辑跑在 Web Worker / Canvas 里，主界面只负责队列、设置和下载。这样 Web 版可以直接嵌进站点，Windows 版也能作为一个独立 EXE 交付。

这次的发布资产是：

  • yuan-image-converter-win-v0.1.0.exe
  • yuan-image-converter-web-v0.1.0.zip
  • yuan-image-converter-guide-v0.1.0.md

发布前修掉的几个小坑

这次发布前有一轮比较实在的代码审查，主要抓到了几个“不是不能用，但上线后会显得粗糙”的地方。

第一个是队列信息不够完整。原来只显示文件大小和输出文件名，现在改成保留原始格式，并展示输入格式/大小到输出格式/大小。

第二个是批量进度。单张图片有进度，但整批没有总进度，用户无法判断这次处理还剩多少。现在摘要区会显示“第 N/M 张 · 总进度 X%”，并有一个带可访问名称的进度条。

第三个是键盘焦点。真正的文件 input 是透明铺在上传区上面的，如果只给 input 自己焦点样式，视觉上其实看不见。现在上传区域在 :focus-within 时会显示清楚的 outline。

第四个是发布路径验证。普通开发测试只证明了 / 下能跑，但 Yuan Tools 主站会把工具放在 /app-static/image-converter/。这次专门加了一个生产 Playwright smoke：先生成 release/html，再把它挂到 /app-static/image-converter/，确认 CSS、JS、Worker 和实际转换流程都能在子路径下运行。

这些修正不会出现在功能列表里，但它们会决定这个工具在真实站点上是不是稳。

最终交付路径

这版的发布路径和前面几个工具一致：

flowchart LR
  A["yuan-image-converter 本地项目"] --> B["GitHub Release v0.1.0"]
  B --> C["Yuan Tools Astro 主站"]
  C --> D["Cloudflare Pages"]
  D --> E["www.yuantools.com"]

对应的线上入口是：

这次我比较满意的地方

最满意的不是“能转换图片”，而是整个交付链条更硬了一点。

以前我会更关注功能本身：能不能输入、能不能输出、EXE 能不能打出来。现在会多检查一层：它在主站的子路径里是不是还能跑，Release 资产名是不是稳定，队列状态是不是对键盘用户友好，失败和重试是不是不会互相打架。

小工具业务不是做一个大系统，而是不断把这些小的可靠性习惯沉淀下来。每个工具都不大，但每个工具都多一点真实产品的样子，最后整个 Yuan Tools 才会像一个能长期运营的站点。

下一步

图片格式转换器的 v0.1.0 先到这里。后面如果继续迭代，我会优先考虑：

  • 增加图片尺寸调整和压缩目标大小。
  • 增加保留/移除 EXIF 的明确选项。
  • 给大批量任务增加更细的耗时提示。
  • 在主站工具页补真实截图，让用户进入在线版前就知道界面长什么样。

这次先把最常用的格式转换流程做扎实，剩下的留给后续版本慢慢补。