我用AI对话3小时,做出来一个图片压缩+水印工具(附完整过程)

我是一个零基础的前端小白，没学过代码。但因为工作需要处理图片压缩和水印，又不想下载那些收费软件，所以决定用AI帮我写一个。

这是我和AI对话3小时的完整记录，工具已经免费部署，你也可以直接用。

第一部分：我一开始的需求

给AI的需求：

我需要一个图片压缩与水印工具，具体要求如下：

• 支持上传图片

• 压缩前后对比，显示压缩率

• 可导出JPEG/WebP格式

• 可加文字水印，位置可选居中或右下

• 水印要白色半透明带阴影

• 水印透明度和大小可独立调整

第二部分：AI给的初版 + 我的反馈

AI很快给了第一版代码。我复制到HTML文件里打开，能跑起来，但界面比较乱。

我接着提了优化要求：

1. 界面要紧凑，上传区、原图、压缩后预览要清晰

2. 水印大小最大要108px

3. 水印输入框要能自动更新，不需要点“应用”按钮

第三部分：最终成品展示

经过几轮调整，最终工具长这样：

• 上传图片 → 自动显示原图和压缩后对比

• 滑动压缩质量 → 实时更新

• 改水印文字 → 自动刷新预览

• 选格式、调透明度、改大小 → 所见即所得

第四部分：这个工具能干什么

• ✅ 完全免费，纯本地处理，图片不上传任何服务器

• ✅ 支持JPG/PNG/WebP/BMP/GIF

• ✅ 可压缩+格式转换（JPEG/WebP）

• ✅ 可加自定义文字水印（位置、透明度、文字大小）

• ✅ 实时预览，一键下载

第五部分：写在最后

这个工具我已经做了线上部署。点击底部「阅读原文」可前往使用工具。

后续用AI做了其他小工具，也会继续分享开发过程。

这哥工具的完整对话记录我也整理出来了，有需要的可以私信我。