利用AI编程制作图片压缩工具：从DeepSeek规划到Trae实现的完整方案
出于工作需求，常在微信社群里转发宣传海报，然而海报尺寸过大便会十分模糊，故而通常采用无损压缩方式，可是线上工具存有限制次数，所以今日我们借助AI编程制作一款图片压缩工具。
首先我们请 生成一个制作方案，提示词如下
当下，我打算去做一个用于图片压缩的网站，仅仅凭借 HTML 以及 CSS 就行。请帮我谋划一下以下的设计方案，无需去撰写代码，。
然后我们把方案扔给 Trae，方案提示词如下：
提示词：
那行，这可是个极为出色的项目！它包含了前端核心的三个 。而且具备明确 。咱们暂且不用马上着手写代码，先去搞一个清晰、全面的规划 。
以下是为您的“图片压缩网站”制定的设计方案：
### 1. 项目核心目标
打造一个纯静态网站，其目的在于在浏览器端实现图片压缩，此网站将确保所有相关操作都于用户本地予以展开，并不需要服务器后端的支持，以此来达成对用户隐私的保护，最终达成快速且安全的图片压缩效果。
### 2. 功能规划
我们将功能分为核心功能和增强功能。
#### 核心功能
1. **图片上传**
具备这样的一种方式，此方式能够支持把文件进行拖拽，使其位于指定区域，并且还支持通过点击按钮的行为，从文件管理器那儿作出选择 。
格式呈现为，清晰明确地提示出所支持的图片格式，好比 JPG，又或者 PNG，再或者 GIF，以及 WebP 这类等等。
上传之后，马上于页面之中呈现原图的预览图呢。
2. **压缩参数调整**
- 提供一个滑块控件， - 利用此控件，允许用户就压缩质量进行调整， - 压缩质量的范围在例如所说的百分之零到百分之一百之间， - 而这一关于设置取值范围的压缩质量，乃是最为关键核心的参数 。
准备一份下拉菜单，将其提供给用户，使之能够从中选择输出格式呢，好比那种 `image/jpeg` 呀，或者 `image/png` 啦，又或者 `image/webp` 哟。当用户选择不一样的格式之际呢，能够展现出与之相应的提示哟，像是“JPEG 适合照片”这样的提示呢。
3. **压缩执行与对比**
* **压缩按钮**：提供一个明确的“开始压缩”按钮。
通过对比视图，在压缩结束之后，将原图以及压缩后的图片，以并排或者滑块对比的形式予以展示 。
在信息呈现方面，能够明确地将原图的具体大小，以及经过压缩处理之后的大小，还有压缩所形成的比例清晰地展现出来。
4. **结果下载**
预备一个能够显著吸引目光的“下载压缩图片”按钮，让用户只需一键就能完成保存操作。
#### 增强功能
一次选择多张图片，这是被允许的，之后按统一设置来压缩，完成压缩后进行打包，打包好了再去下载，此为批量压缩 。
按钮预设压缩级别，提供“高压缩（小文件）”之类按钮，“高质量（大文件）”也在其中，还有“标准质量”按钮，以此方便用户能够快速进行选择。
3. **分辨率适配**：给出可供选择的内容，准许使用者于进行压缩之际依照比例或者按照指定的宽度以及高度来对图片实施缩放操作。
4. **元数据留存/去除**：给出一个可供勾选的框子，以便让使用者挑选对于像是 EXIF 这类元数据是选择留存还是去除（去除能够在进一步程度上缩小文件所占的空间大小）。
### 3. 技术方案规划
#### HTML 结构
我们将页面划分为几个逻辑区域：
* **顶部 **：网站标题和简短介绍。
这是一个区域，它被称作上传区，它是大的，它具备视觉吸引力，它包含拖拽提示，它包含文件选择按钮。
**控制面板**，它放置着压缩质量滑块，还有格式选择，以及分辨率设置等所有控件 。
左右分栏的那个区域，被称作“预览对比区”，在这里，会分别将“原图”以及“压缩后”的图片，还有文件信息展示出来 。
* **操作区**：放置“开始压缩”和“下载”按钮。
* **底部 **：版权信息等。
#### CSS 样式
在 **设计风格** 这块儿，运用的是现代简约样式，其涉及界面部分呈现无比澄澈干净的状态，并且操作指引方面展现为极为明晰清楚的情形。
通过使用，或者借助 CSS Grid 来营造创建出那种具备响应特性的布局，要切实保证在手机与电脑这两种设备之上都能够拥有良好的体验感受。
* **交互反馈**：
* 上传区在拖拽文件进入时改变样式（如高亮边框）。
* 按钮有悬停和点击效果。
* 压缩过程中显示一个加载动画。
#### 逻辑
这是项目的核心，主要利用浏览器提供的 API：
文件做处理过程中，要凭借那``API或者`URL.()`去弄，干什么呢，是读取 用户上传的图片文件，然后生成预览 。
② **将画布进行压缩**，运用 `` API 来开展图片的绘制工作以及实施压缩操作 。
* 将图片绘制到 `` 元素上。
借助 `.(, , )` 办法，凭借 `` 参数（其范围为 0 至 1）控制 JPEG/WebP 的压缩品质，然而对于 PNG 情况而言，此参数不具备效用。
先进行对比以及信息计算，计算原图的Blob或者File对象，计算其size属性，计算压缩后图片的Blob或者File对象，计算其size属性，然后将这些计算结果显示给用户。
4. **下载功能**：借助 `URL.()` 来为经过压缩之后的图片 Blob 创建一条临时链接，接着把这个临时链接赋给 `` 标签的 `href` 属性，随后触发下载操作。
### 4. 用户界面与交互流程
1. **入口**：用户打开网站，看到一个清晰的上传区。
2. **上传环节**：用户借助拖拽的方式，或者通过点击来上传图片，随即图片预览便马上显示于“原图”区域 。
将其调整为：3. **进行调整**：用户于控制面板之中对压缩设置予以调整。在调整这个动作开展之时，能够在当时进行显示预估的文件大小所产生的变化（此为一项高级别样的功能，在初期阶段可以不予以实现）。
4. **压缩**：当用户按下“开始压缩”按钮期间，其目睹加载动画。待其结束之后，压缩图于“压缩后”区域现身，且呈现出压缩比等相关信息。
5. **下载**：当用户对于结果呈现出满意的状态时，会去点击“下载”按钮，以此来保存图片。
### 5. 潜在挑战与解决方案
大图片处理方面，超大的图片，比如说超过特定范围的那种，有可能会致使渲染性能出现问题，或者导致面积受到限制 。
以下是改写后的内容：在绘制至该位置的时候，要先针对图片实施恰当的缩放操作，以此保证它的最大边长处于一个合乎情理的范围当中，比如说这样的范围 。
* **不同格式的特性**：
PNG无损，参数对PNG是无效的情形。要是需要对PNG进行压缩，那就得要运用别的技巧，像是去减少颜色的位数，然而这是超出了基础API的能力范畴的，或许得要引入第三方库（比如UPNG.js）。
建议在刚开始的时候，能够集中精力于 JPEG 以及 WebP 的压缩，对于 PNG 只给予格式转换方面的功能。
**浏览器兼容性方面**：要保证核心 API（像是 ``, `.`）于目标浏览器（例如 , , , Edge）之内具备极佳的支持。针对那些不支持的老旧浏览器，是能够考虑采用 。
### 6. 项目阶段规划
**第一阶段：最小可行产品**
达成单张 JPG 图片的上传，完成质量滑块压缩，实现并排预览，并且完成下载 ， 达成单张 PNG 图片的上传，完成质量滑块压缩，实现并排预览，并且完成下载 。
**第二阶段：功能完善**
* 增加输出格式选择（WebP）。
* 增加分辨率调整功能。
* 优化 UI/UX，添加更好的加载状态和交互反馈。
**第三阶段：高级功能**
* 实现批量图片压缩与下载。
* 添加压缩预设。
* 考虑引入更高级的 PNG 压缩库。
这套设计方案给您呈上了一条明晰的路线图，您能够依据此规划，一步一步地着手编写代码，祝您项目进展顺遂！
扫码体验
我依据老徐那副业避坑指南里的AI编程来开展学习，要是有兴趣的就能够扫码跟我一块学习！
去添加亚伟以及他那些朋友们的私人微信，并且需注意进行备注，备注的内容是“亚伟公号”，之后便可围观其朋友圈，同时还能够领取十年原创资料包。
正在实践老徐避坑指南项目，想和我一样进入《老徐陪你副业避坑》的，找到正在从事该项目实践有关工作的亚伟，于微信联系他，他会赠送《一人企业复利商业化》最新电子版 。
欢迎 你 发表评论: