最近因为工作需要，经常要给大量图片批量加水印。
一开始是用 PS 的动作批处理，但配置起来麻烦、灵活性不够。市面上也有一些在线工具，但是要么要付费、要么功能有限，体验都不太好。
于是我花了 3 天时间，借助 AI 快速迭代，开发了一款基于 Next.js 15 + Fabric.js 的现代化水印工具，并且已经开源到 GitHub 了。
👉 项目地址：Image Watermark
首页
图片水印
文字水印
全屏图片&文字水印
💡 为什么要自己做？
- 批量处理：动辄几十上百张图片，加水印必须自动化。
- 智能定位：需要保证不同分辨率下，水印位置和效果一致。
- 自定义强：文字水印、图片水印、全屏平铺都有需求。
- 跨平台：直接网页就能用，不想依赖本地软件。
✨ 功能亮点
- 智能水印定位：九宫格定位、比例模式（不同分辨率效果保持一致）、像素模式（精确定位）。
- 多种水印形式：文字水印（字体/颜色/描边/阴影）、图片水印（PNG/JPG/WebP）、全屏平铺。
- 批量处理：一次处理几十张图片，带进度显示，支持错误恢复。
- 现代化界面：支持暗色模式、拖拽上传、实时预览、键盘快捷键。
- 高效输出：支持 PNG / JPEG / WebP 格式导出。
🛠️ 技术点
- Next.js 15 App Router：前端 + API 一体化
- Fabric.js：基于 Canvas 的水印绘制
- Zustand：轻量级状态管理
- shadcn/ui + Tailwind：界面现代化
- Docker 部署：支持一键容器化
🚀 在线体验 & 使用方式
你可以自己本地运行，也可以直接部署到 Vercel/Docker。
git clone https://github.com/xyh9949/image-watermark.git
cd image-watermark
npm install
npm run dev
打开 http://localhost:3000，拖几张图片进去就能体验。
🤔 这次开发的感受
其实我一个人做的话，光是 Fabric.js 的文档就能折腾半天。
但这次我大量用 AI 辅助开发，尤其是在 Canvas 渲染逻辑、Next.js 配置这些地方，节省了非常多时间。
很多代码都是 “我描述需求 → AI 生成初版 → 我自己再优化” 这样的模式，3 天时间就把一个可用的版本做出来了。
📢 最后
这个项目我已经开源，欢迎大家试用和提建议：
👉 GitHub 地址：github.com/xyh9949/ima…
如果觉得有用的话，可以给个 ⭐ 支持一下！
后续我打算加上更多高级功能，比如 批量命名规则、更多水印样式、图片压缩优化。
