我做了一个 AI to PNG 在线工具：文件不上传服务器，直接在浏览器里转
这两天我给自己的工具站 ToolKnit 新增了一个小功能：AI to PNG。
它解决的问题很直接：
有时候我们手里拿到的是 .ai 文件，但真正想要的只是一个能直接预览、分享、继续处理的 PNG 图片。尤其是做运营图、社媒图、简单物料处理的时候，很多人并不想专门打开一整套设计软件，只是想先把它导出来看看。
所以我就做了这个工具：
AI to PNG
地址：https://toolknit.com/tools/ai-to-png.html
为什么想做这个功能？
我一直比较喜欢做“打开就能用”的小工具。
很多在线转换站的问题，不是功能不够，而是流程太重：
- 要上传到服务器
- 要等转码
- 要排队
- 有些甚至还要登录
- 处理设计源文件时，隐私上也会让人有点不放心
所以我这次还是延续 ToolKnit 一贯的思路：
尽量在浏览器里完成处理，不把文件传到服务器。
对用户来说，这种体验会简单很多：
- 打开网页
- 选择
.ai文件 - 预览
- 导出 PNG
没有中间环节，没有额外负担。
AI 文件转 PNG，难点在哪里？
一开始看上去，好像只是“格式转换”四个字。
但真正做的时候，会发现这里面并不只是改个后缀名那么简单。
.ai 文件本质上并不是专门为浏览器设计的格式。
浏览器原生也没有“直接打开 AI 文件然后渲染”的能力。
所以这个功能真正的核心，不是“下载一个转换器”，而是：
怎么在浏览器里把 AI 文件内容解析出来，并正确渲染成位图。
这一步如果做不好，后面导出的 PNG 质量、尺寸、透明背景、预览一致性都会出问题。
我这次的实现思路
这版 AI to PNG 的思路，核心是这几个部分：
1. 利用浏览器端可处理的渲染链路
很多 AI 文件本身兼容 PDF 渲染思路，所以可以借助 PDF.js 在前端完成页面解析和绘制。
简单来说就是：
- 读取用户本地选择的 AI 文件
- 在浏览器里解析可渲染内容
- 把内容绘制到
Canvas - 再从
Canvas导出 PNG
这样整条链路都发生在本地浏览器里。
2. 用 Canvas 做最终位图输出
渲染完之后，真正导出 PNG 的动作还是交给 Canvas。
这一步的好处是：
- 可以控制导出尺寸
- 可以处理透明背景
- 可以保证最终拿到的是浏览器友好的 PNG 图片
- 也方便后续继续接其他图片处理能力
比如你把 AI 转成 PNG 之后，还可以继续去做背景处理、裁剪、压缩之类的操作。
3. 用 IndexedDB 记录本地历史
我自己做工具时有一个习惯：
只要对用户有帮助，而且不影响轻量体验，就尽量保留一点“本地记忆”。
所以这类工具我会把一些历史记录存在浏览器本地，比如最近处理过的内容、最近导出的结果等。这样即使你不小心刷新了页面，也不会一下子全丢。
这里用的是 IndexedDB，不需要账号系统，也不需要后端数据库。
4. 用 JSZip 做批量打包能力
如果后面用户有连续导出、多文件整理的需求，浏览器里也可以直接做 ZIP 打包。
这类能力我越来越喜欢，因为它能让“在线工具”这件事，不只是一个单点按钮，而是变成一条完整的小工作流。
为什么我比较坚持“浏览器本地处理”？
这可能是我这段时间做工具最在意的一件事。
因为很多人以为“在线工具”天然就等于“上传到服务器处理”。
但其实前端这几年能力已经很强了，很多事情完全可以在本地完成。
本地处理的优点很明显：
- 隐私更好：文件不离开设备
- 速度更直接：省掉上传和服务端排队
- 成本更可控：不需要为每次处理都承担服务器计算成本
- 体验更轻：用户打开就能开始用
当然，它也有边界。
浏览器不是万能的，特别大的文件、特别复杂的格式、特别重的计算任务，仍然会受到设备性能限制。
所以做这种工具，本质上不是“什么都塞进前端”，而是判断：
哪些事情适合本地做，哪些事情不适合。
在我看来，像 AI to PNG 这种偏预览和导出型的需求，就很适合优先往浏览器端走。
这个工具还有一个我自己很喜欢的搭配用法
这次做完 AI to PNG 之后，我自己第一反应不是“终于又多了一个转换器”。
而是：
它可以和背景抹除功能串起来用了。
流程会变成：
- 先把 AI 文件转成 PNG
- 再把 PNG 丢进背景抹除工具
- 最后得到更适合做电商图、头像图、展示图的透明图
这个组合在很多轻量场景里还挺实用的。
也就是说，它不是一个孤立的小工具，而是可以接进整个图片处理链路里的一个节点。
做这种工具时，我越来越在意什么？
不是“功能看起来多厉害”，而是：
- 用户第一次打开能不能马上理解
- 操作路径是不是够短
- 文件是不是安全
- 页面是不是轻
- 功能之间能不能形成组合
我越来越觉得，一个工具站如果只是“页面很多”，其实意义没那么大。
真正重要的是每个工具之间有没有连贯性，有没有工作流价值。
最近的一点开发感受
今天是中国时间 5 月 19 日。
前几天一直在下雨，不过这几天心情还不错，所以虽然更新频率稍微慢了一点，但还是抽时间把这个功能做出来了。
而且今天对我来说还有一件挺重要的事：
我的另一个站 24picture.com 也上线了。
那个站最开始是想做 AI 生图方向的内容，后面也在想，做成一个更聚焦图像能力的工具站其实也挺有意思。
它会和 ToolKnit 一样继续更新，只是方向会更偏图像类功能。
对我来说，这算是最近一个很开心的小里程碑。
最后
如果你也刚好有 .ai 文件想快速转成 PNG，可以试试我刚做的这个工具：
https://toolknit.com/tools/ai-to-png.html
如果你对“浏览器本地处理文件”这类方向也感兴趣，也欢迎交流。
我最近会继续把这条路线往下做，尽量把更多常见但麻烦的小需求，做成真正打开就能用的工具。
如果这篇文章有点意思，欢迎点个赞或者聊聊你平时最常遇到、但又最烦的文件处理需求。
