ImgShrink：摄影暗房里的在线图片压缩工具开发记

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

我这阵子正好在参加 CodeBuddy 的“首席试玩官”活动，顺手捣鼓了个小工具，名字叫 ImgShrink，顾名思义，是个图片压缩器。但我没打算做成那种千篇一律的样子，光是能压缩图片太普通了，我想它得有点味道——于是就整了个 摄影暗房 的 UI 主题，黑灰底色，一束光打在图像上，有种静悄悄等待显影的感觉。

这回，我没着急写代码

以前遇到这种项目，我总是先上手敲几行再说，但这次我干脆把整件事直接交给 CodeBuddy 了。我只写了一个大概的提示词，大概就是“用 Vue3 做个拖拽上传 + 压缩 + 导出 Zip 的小工具”，剩下的就让它自由发挥了。

出乎意料的是，它动手比我还快，还在开始阶段就把项目分成了几步：怎么搭项目、哪些依赖要先装、组件拆成几块、每个功能怎么串起来……逻辑挺清晰的，节奏也刚好。

Vite 起手，Vue3 落地

CodeBuddy 给我用的是 Vite + Vue3 搭建整个工程。这个组合我平时也常用，启动快、结构清楚，这次就没再犹豫。项目名就叫 imgshrink，直接用 JavaScript 开搞。

它顺手装上了几个关键包：browser-image-compression 负责压图，jszip 和 file-saver 搞打包和下载，基本一站到位了。

在这里插入图片描述

上传这一块，写得意外地细

上传组件的实现挺让我意外的，CodeBuddy 并没有只是简单弄个 file 输入框，而是从拖放区的样式到文件格式验证，再到多文件批量上传和事件发送，全都写进去了。组件名叫 ImageUploader.vue，代码看着干净，逻辑不啰嗦，父子组件通讯那块也写得挺顺。

压缩逻辑全都装在了 ImageProcessor

真正承担图像压缩任务的是 ImageProcessor.vue，也就是主力组件。CodeBuddy 把压缩比例设置、格式选项、原图 vs 压缩图对比、预览切换，甚至单张下载和整体打包导出都搞进去了。

压缩用的是 browser-image-compression，我设了一下比例和尺寸，它就自动根据设定调节了。打包下载那块是 JSZip 搞定的。流程很顺，从点击上传到生成压缩包，基本没啥卡壳。

而且它还加了个压缩过程的 loading 提示，这种细节真是贴心，不然批量压图等的时候不提示会让人心里发毛。

暗房味道的 UI，真就整上了

最让我惊喜的是 UI。最初我只提了句“想做个像摄影暗房的界面”，CodeBuddy 居然真的给我实现出来了。

它不仅调了全局的黑灰配色，还加了类似聚光灯的高亮背景，让上传的图片像是在灯下等待冲洗一样。有种“不是摄影师也想玩一下调片”的那种气氛。

整体调性统一，而且细节上没有那种“AI 乱贴样式”的感觉，视觉完成度比我预期高。

各组件间的互动也安排得当

CodeBuddy 帮我把上传和压缩组件都集成到 App.vue 里去了，数据传递和状态同步那块也提前想好了。上传完的文件会通过 emit 发给父组件，再传给处理组件统一压缩和显示。

我本来还想自己优化一下结构，结果看了它的写法后觉得：嗯……确实不用动。

最后看下来，我几乎没怎么动手

讲真，整个 ImgShrink 项目下来，我的工作量……可能就是“起个名 + 提个思路”。大部分代码都不是我亲手写的，而是 CodeBuddy 自动生成的。关键是，效果比我自己一点点敲出来还要整洁，体验上也没什么明显短板。

尤其是 UI 的那些“神来之笔”，我根本没细讲，它就自己发挥了不少细节，很多处理方式让我都忍不住保存到自己常用项目里了。

用下来像“跟个聪明搭档做 side project”

其实 ImgShrink 并不是什么大项目，但这次的开发体验有点像跟一个熟得不能再熟的搭档一起做 side project。你提个想法，它就能一边分析一边动手，还能时不时帮你补上忘记说的细节。

开发过程中本来可能会让我头疼的那些“小坑”——比如文件批量处理、Zip 打包命名、压缩完成提示、拖拽区域的交互反馈等等，CodeBuddy 全都提前考虑到了。

最后说一句：这玩意真的挺好用

现在的 ImgShrink，能拖拽上传，能压缩，能改格式，还能批量导出 zip 包，界面也干净利落。最重要的是，它看起来就像一台旧暗房里的灯箱，很符合我最初想做的“摄影人专用小工具”的那种感觉。

整个过程说不上“我在教它做开发”，倒更像“我提了个想法，它帮我落地并做了扩展”。

如果你也在折腾前端项目，尤其是那种“工具类 + 个性 UI” 的，可以试试用 CodeBuddy 一口气拉出来，可能会省下你一大堆时间，甚至收获一些“咦？它居然还想到这个”的惊喜。