# 智能抠图工具

一个现代化的在线图片处理工具，支持智能抠图、魔术棒选择和画笔涂抹功能。

## 功能特性

### 🎯 智能抠图
提供多种智能抠图算法，适用于不同场景：

1. **自动选择模式**（推荐）
   - 自动评估图片特征，选择最佳抠图算法
   - 适用于大多数常见场景

2. **颜色聚类模式**
   - 基于颜色差异自动分离前景和背景
   - 适用于背景颜色单一的图片（如白底产品图）
   - 自动检测背景颜色和前景颜色

3. **边缘检测模式**
   - 使用Sobel算子检测边缘
   - 从图片中心开始洪水填充
   - 适用于主体在中心且边缘清晰的图片

4. **人体分割模式**
   - 使用TensorFlow.js和BodyPix模型
   - 专门用于识别人体和人物
   - 需要加载AI模型（首次使用约4MB）

所有模式都支持：
- 边缘平滑度调整（0-100）
- 自动去除小噪点
- 高质量边缘处理

### ✨ 魔术棒工具
- 点击选择相似颜色区域
- 可调节容差值（1-100）
- 支持连续/非连续区域选择
- **多选支持**：自动累加选择，每次点击都会添加到现有选区
- Shift+点击：添加到选区
- Alt+点击：从选区减去
- **右键点击**：撤销最后一次选择
- **中键点击**：确认删除当前选区

### 🖌️ 画笔涂抹
- 精细调整选区边缘
- 可调节画笔大小和硬度
- **双模式切换**：
  - 添加模式：涂抹添加选区
  - 取消模式：涂抹取消选区
- **Alt 键临时切换**：按住 Alt 键临时反转当前模式
- **右键点击**：撤销最后一次涂抹
- **中键点击**：确认删除当前选区
- **实时视觉反馈**：不同模式显示不同颜色

### 📋 其他功能
- 撤销/重做操作（支持最多50步历史记录）
- **选区历史管理**：跟踪每次选择操作
- 反选功能
- 清除选区
- 删除选中区域
- 导出PNG图片（支持透明背景）
- **删除确认动画**：视觉反馈显示删除操作
- **重新上传图片**：一键重置并自动打开文件选择器，无需刷新页面

### 🧹 后处理功能
- **选区降噪**：抠图前清理选区噪点
  - 在执行抠图前使用，清除魔术棒选出的噪点
  - 使用 BFS 算法分析选区中的连通区域
  - 同时移除已选和未选区域中的小噪点
  - **使用场景**：
    - 魔术棒选择后选区有细小噪点
    - 需要清理选区中的分散小区域
    - 提高抠图精度，减少后期处理
  - **建议**：先用魔术棒选择，再用选区降噪清理，最后执行抠图
- **框选去噪**：局部区域清理噪点
  - 点击"框选去噪"按钮激活框选模式
  - 在图片上拖动鼠标框选目标区域
  - 松开鼠标后自动对框选区域执行去噪
  - 同时处理透明和不透明噪点
  - **优势**：精确定位，只处理需要的区域，不影响其他部分
- **全图去噪**：抠图后清理图像噪点
  - 自动识别并移除整张图片中的细小噪点
  - 使用 BFS 算法进行连通区域分析
  - 同时处理透明和不透明噪点
  - 支持自定义最小区域面积阈值（10-1000 像素）
  - **建议值**：
    - 轻度噪点：50-100 像素
    - 中度噪点：100-200 像素
    - 重度噪点：200-500 像素

### 🔍 缩放功能
- **鼠标滚轮**：放大/缩小画布（基于鼠标位置缩放）
- **触摸板双指滑动**：平移画布（上下左右滑动，自动识别触摸板）
- **触摸板双指捏合**：缩放画布（Ctrl + 滑动）
- **Alt + 鼠标拖动**：平移画布
- **缩放控制按钮**：
  - 放大（Ctrl++）
  - 缩小（Ctrl+-）
  - 适应窗口
  - 重置缩放（Ctrl+0）
- 自动适应窗口大小
- 实时显示缩放比例
- **智能识别**：自动区分鼠标滚轮和触摸板操作

## 快捷键

| 快捷键 | 功能 |
|--------|------|
| `Ctrl + Z` | 撤销 |
| `Ctrl + Y` | 重做 |
| `Ctrl + S` | 下载图片 |
| `Delete` | 删除选区 |
| `Ctrl + +` | 放大画布 |
| `Ctrl + -` | 缩小画布 |
| `Ctrl + 0` | 重置缩放 |
| `鼠标滚轮` | 缩放画布 |
| `触摸板滑动` | 平移画布 |
| `Alt + 拖动` | 平移画布 |
| `右键点击` | 撤销最后一次选择 |
| `中键点击` | 确认删除当前选区 |
| `Shift + 点击` | 添加到选区（魔棒工具） |
| `Alt + 点击` | 从选区减去（魔棒工具） |
| `Alt + 拖动` | 临时切换画笔模式（画笔工具） |

## 使用方法

### 1. 启动应用

由于应用使用了 ES6 模块，需要通过本地服务器运行。你可以使用以下任一方式：

**方式一：使用 Python（推荐）**
```bash
# Python 3
python -m http.server 18080

# Python 2
python -m SimpleHTTPServer 18080
```

**方式二：使用 Node.js**
```bash
# 安装 http-server
npm install -g http-server

# 运行
http-server -p 8080
```

**方式三：使用 VS Code Live Server 插件**
1. 安装 Live Server 插件
2. 右键点击 `index.html`
3. 选择 "Open with Live Server"

### 2. 打开应用

在浏览器中访问：`http://localhost:8080`

### 3. 使用步骤

1. **上传图片**：点击"选择图片"按钮上传需要处理的图片
2. **选择工具和模式**：
   - **智能抠图**：
     - 选择抠图模式（自动选择/颜色聚类/边缘检测/人体分割）
     - 调整边缘平滑度
     - 点击"应用智能抠图"按钮
   - **魔术棒**：点击图片选择相似颜色区域
   - **画笔**：拖动鼠标精细调整选区
3. **调整选区**：使用反选、清除选区等功能
4. **删除背景**：点击"删除选区"移除选中区域
5. **下载图片**：点击"下载图片"保存处理结果

### 💡 使用技巧

- **白底产品图**：使用"颜色聚类"模式效果最佳
- **人物照片**：使用"人体分割"模式
- **复杂背景**：先使用"自动选择"，效果不好再尝试其他模式
- **边缘模糊**：增加边缘平滑度值
- **小噪点**：程序会自动去除，无需手动处理
- **多选操作**：使用魔棒工具多次点击，每次都会累加到选区
- **撤销选择**：右键点击可以撤销最后一次选择操作
- **快速删除**：中键点击可以立即删除当前选区并显示确认动画
- **精细调整**：放大画布后使用画笔工具进行精细调整
- **画笔模式切换**：点击"添加"或"取消"按钮切换画笔模式，或按住 Alt 键临时反转
- **取消选区**：使用画笔的"取消模式"涂抹已选区域，精确移除不需要的选择
- **重新上传**：点击"重新上传"按钮会自动重置所有状态并打开文件选择器，实现一键换图
- **缩放操作**：直接滚动鼠标滚轮即可缩放，缩放中心为鼠标位置
- **触摸板操作**：双指滑动平移画布，双指捏合缩放画布
- **选区降噪**：魔术棒选择后，如果选区有噪点，使用"选区降噪"功能清理（建议阈值 100），然后再执行抠图
- **框选去噪**：如果只想清理特定区域的噪点，使用"框选去噪"功能精确处理
- **全图去噪**：抠图后如果边缘有细碎噪点，使用"全图去噪"功能自动清理（建议阈值 100）

## 项目结构

```
pictureProcess/
├── index.html              # 主页面
├── css/
│   └── style.css          # 样式文件
├── js/
│   ├── main.js            # 主逻辑
│   ├── imageProcessor.js  # 图像处理核心
│   ├── tools/
│   │   ├── smartCut.js    # 智能抠图工具
│   │   ├── magicWand.js   # 魔术棒工具
│   │   └── brush.js       # 画笔工具
│   └── utils/
│       ├── canvasUtils.js # Canvas工具函数
│       ├── zoomManager.js # 缩放管理器
│       └── selectionHistory.js # 选区历史管理器
└── README.md              # 说明文档
```

## 技术栈

- **前端框架**：原生 HTML5 + CSS3 + JavaScript (ES6+)
- **图像处理**：Canvas API
- **AI模型**：TensorFlow.js + BodyPix
- **字体**：Google Fonts (Noto Sans SC, Space Grotesk)

## 浏览器兼容性

- Chrome 80+
- Firefox 75+
- Safari 13.1+
- Edge 80+

## 注意事项

1. **抠图模式选择**：
   - "自动选择"模式会自动评估并选择最佳算法，推荐优先使用
   - "人体分割"模式需要下载 BodyPix 模型（约 4MB），首次使用请耐心等待
   - "颜色聚类"和"边缘检测"模式无需下载模型，处理速度最快

2. **图片要求**：
   - 建议使用 2000x2000 像素以下的图片以获得最佳性能
   - 白底或纯色背景的产品图效果最佳
   - 复杂背景可能需要结合多种工具使用

3. **浏览器要求**：
   - 需要支持 ES6 模块和 Canvas API 的现代浏览器
   - 推荐使用 Chrome、Firefox、Edge 最新版本

## 性能优化建议

- **大图片处理**：建议先压缩到合适尺寸再处理
- **抠图模式选择**：
  - 优先使用"颜色聚类"或"边缘检测"模式（速度快）
  - 人物照片才使用"人体分割"模式（需要加载模型）
- **魔术棒工具**：较低的容差值可以提高选择精度
- **组合使用**：先用智能抠图创建大致选区，再用画笔精细调整

## 许可证

MIT License

## 作者

智能抠图工具开发团队