我用 AI 做了一款低成本图片工具小程序,并把它开源了

2 阅读4分钟

我用 AI 做了一款低成本图片工具小程序,并把它开源了

大部分代码和文档由 AI 协作完成,不自建图片处理后端,不上传用户原图,一个人也能持续维护和发布。

最近,我把微信图片工具小程序「光屿图片」开源了。这个项目有一个很重要的特点:从功能代码、测试到开源文档,大部分内容都是在 AI 协作下完成的。

项目地址:github.com/tangcl01020…

体验地址:

gh_3c04757f80a7_344.jpg

它包含图片压缩、尺寸调整、裁剪旋转、格式转换、图片调色、证件照、长图拼接和水印等功能。项目采用微信原生小程序和 TypeScript 开发,图片主要在用户设备上通过 Canvas 2D、WebGL 和本地推理完成。

我负责确定产品方向、选择技术方案、检查生成结果并完成真机验证;AI 主要参与需求拆分、代码生成、重构、测试补充、问题排查和文档整理。它不是输入一句话就自动完成的项目,但 AI 的确承担了大量具体制作工作。

我做这个项目时,最关注的不是堆多少功能,而是四个更实际的问题:

  • AI 制作:让 AI 承担大量编码、测试和文档工作,个人也能完成较完整的项目;
  • 低成本:基础功能不需要图片处理服务器、数据库和对象存储;
  • 易维护:页面、业务流程和图像算法分层,核心逻辑可以独立测试;
  • 好发布:Fork 后替换 AppID 即可导入微信开发者工具,可选能力再按需配置。

AI 在这个项目里做了什么

AI 不是只用来补全几行代码,而是参与了项目的大部分制作过程:

  • 根据功能目标拆分页面、服务和图像处理模块;
  • 编写 Canvas、WebGL、文件处理和本地推理相关代码;
  • 为尺寸、裁剪、拼接、曲线和配置校验补充测试;
  • 根据运行结果定位问题并调整兼容与降级策略;
  • 整理 README、贡献指南、安全说明和博客文章。

人工工作仍然不可少。我需要决定哪些功能值得做、哪些方案适合小程序、哪些生成代码可以保留,并通过开发者工具和真机验证最终效果。

AI 带来的最大变化,不只是写代码更快,而是降低了个人开发者完成工程化工作的门槛。过去容易被推迟的测试、异常处理和开源文档,也可以在开发过程中一起完成。

为什么选择本地处理

传统云端方案通常需要经历:

上传原图 → 对象存储 → 服务端处理 → 下载结果 → 清理文件

这个项目的大部分功能则是:

选择图片 → 小程序端处理 → 本地预览 → 用户主动保存

这样既减少了服务器、存储和带宽投入,也让用户原图默认不离开设备。即使处理次数增加,维护者也不需要跟着扩容图片处理服务。

本地处理并不代表忽略设备差异。项目会提前估算图片内存、限制最长边、检测真实编码结果,并在高分辨率处理失败时主动降级。稳定的端内方案,才是真正能够替代云端兜底的方案。

这次拆成四篇来讲

一篇文章同时讲完所有实现会太长,所以我把几个代表性功能拆开:

  1. 图片压缩:怎样在目标体积内尽量保留画质
  2. 图片调色:怎样用 WebGL 完成实时预览
  3. 证件照:怎样在小程序端完成本地 AI 抠图
  4. 长图拼接:怎样识别并去除截图重叠区域

每篇只讨论一个功能,包括 AI 如何参与实现、核心技术思路、资源限制,以及它为什么适合在小程序本地完成。

开源与发布

仓库使用 MIT License,提供测试、贡献指南、安全说明、Issue/PR 模板和自动化检查配置。公开配置使用 touristappid,广告位和模型地址默认留空,不包含个人密钥或私有发布信息。

本地体验只需要:

git clone git@github.com:tangcl010203-creator/image-tools-miniprogram.git
cd image-tools-miniprogram
npm ci
npm run check

然后导入微信开发者工具即可。发布自己的版本时,替换 AppID,并根据实际启用的功能补充模型域名、广告位和隐私用途配置。

如果你也在做个人项目、小团队产品或课程项目,希望借助 AI、用尽量少的后端投入完成一款实用工具,可以从这个项目中挑选需要的功能直接复用。

  • GitHub:github.com/tangcl01020…
  • 许可证:MIT
  • 技术栈:微信原生小程序、TypeScript、Canvas 2D、WebGL、Vitest