AI图片工具箱 设计文档
1. 项目概述
纯前端图片处理工具，包含去水印和生成Icon两个功能，无需服务器上传，保护用户隐私。
技术栈：HTML + CSS + JavaScript（原生，无依赖框架）
2. 功能设计
2.1 去水印功能
| 特性 | 说明 |
|------|------|
| 上传 | 点击或拖拽上传，支持 JPG/PNG/WebP |
| 涂抹 | 红色半透明画笔标记水印区域 |
| 参数 | 画笔大小(10-100px)、修复强度(10-100%) |
| 算法 | 周围像素采样均值填充 |
| 导出 | 下载处理后的PNG图片 |
2.2 生成Icon功能
| 特性 | 说明 |
|------|------|
| 输入 | 任意图片 |
| 裁剪 | 自动以中心为准裁剪正方形 |
| 尺寸 | 16/32/48/64/128/256/512 七种尺寸 |
| 导出 | 单个下载或一键下载全部 |
3. 界面设计
-
主题：深色渐变 (
#1a1a2e→#16213e) -
强调色：青紫色渐变 (
#00d4ff→#7b2cbf) -
布局：Tab切换双页面，左图右图预览
-
响应式：移动端自适应单列布局
4. 核心实现
去水印算法
1. 遍历画笔覆盖的像素点
2. 识别红色标记区域 (R>200, G<100, B<100)
3. 对标记区域，以画笔半径采样周围未标记像素
4. 计算加权均值，混合原值和采样值（按强度比例）
Icon生成
1. 计算图片最小边长
2. 以中心为原点裁剪正方形区域
3. 按目标尺寸缩放绘制到独立Canvas
5. 文件结构
clean.html # 单文件，包含所有HTML/CSS/JS