# image-segmentation

**Repository Path**: hm1024/image-segmentation

## Basic Information

- **Project Name**: image-segmentation
- **Description**: 一个轻量的图片长图、大图分割工具
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-16
- **Last Updated**: 2025-09-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 图片框选裁剪工具

一个基于HTML5 Canvas的图片裁剪工具，支持多选择框、自由调整和批量导出功能。

## 功能特性

- ✅ **图片上传**: 支持JPG、PNG、GIF、BMP、WebP格式
- ✅ **多选择框**: 可创建多个选择框进行批量裁剪
- ✅ **自由调整**: 支持拖拽移动和8个方向的大小调整
- ✅ **快捷键缩放**: Ctrl+/- 进行图片缩放，滚轮缩放
- ✅ **批量导出**: 一键导出所有选择框内容
- ✅ **响应式界面**: 左侧菜单栏，右侧操作区布局

## 使用方法

### 基本操作

1. **上传图片**: 
   - 点击左侧"上传图片"按钮选择图片文件
   - 或直接拖拽图片文件到操作区域
2. **创建选择框**: 在图片上按住鼠标左键拖拽创建选择框
3. **选中选择框**: 点击选择框激活，激活的选择框显示为蓝色
4. **调整选择框**: 
   - 拖拽选择框内部可移动位置
   - 拖拽边缘和角落的手柄可调整大小
5. **删除选择框**: 右键点击选择框选择删除，或按Delete键
6. **导出图片**: 点击"导出选区"按钮，配置导出设置后批量下载裁剪后的图片

### 快捷键

- `Ctrl + +`: 放大图片
- `Ctrl + -`: 缩小图片  
- `Ctrl + 0`: 重置视图
- `Ctrl + 1`: 设置为100%缩放
- `Tab`: 切换选择框
- `Shift + Tab`: 反向切换选择框
- `Delete/Backspace`: 删除当前选择框
- `Esc`: 取消当前操作
- `空格`: 切换拖动/选择模式

### 鼠标操作

- **左键拖拽**: 创建新选择框（选择模式）或拖动图片（拖动模式）
- **左键点击**: 选中选择框
- **右键点击**: 显示删除菜单
- **滚轮**: 缩放图片（需在图片区域内）
- **拖拽文件**: 直接拖拽图片文件到操作区域上传

## 技术特性

- 纯前端实现，无需服务器
- 基于HTML5 Canvas API
- 支持高分辨率图片处理
- 响应式设计，适配不同屏幕尺寸
- 内置单元测试框架

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 开发和测试

### 运行测试

在URL后添加`?test=true`参数可运行内置的单元测试：

```
file:///path/to/index.html?test=true
```

测试结果会在浏览器控制台中显示。

### 项目结构

```
├── index.html          # 主页面
├── styles.css          # 样式文件
├── script.js           # 核心JavaScript代码
└── README.md           # 说明文档
```

### 核心类说明

- `ImageCropApp`: 主应用类，负责整体协调
- `ImageManager`: 图片管理，处理加载、显示和缩放
- `SelectionManager`: 选择框管理，处理创建、编辑和删除
- `CanvasRenderer`: Canvas渲染器，负责绘制图片和选择框
- `EventHandler`: 事件处理器，处理鼠标和键盘事件
- `ExportManager`: 导出管理器，处理图片裁剪和下载

## 使用限制

- 图片文件大小限制: 10MB
- 图片尺寸限制: 8192×8192像素
- 选择框最小尺寸: 10×10像素
- 缩放范围: 10%-500%

## 许可证

MIT License

## 更新日志

### v1.0.0
- 初始版本发布
- 实现所有基础功能
- 添加单元测试
- 完善用户界面