本文件为Claude Code (claude.ai/code) 在此代码库中工作时提供指导。
这是一个中文图片处理网页应用，允许用户调整图片尺寸和去除背景。专门为微信表情包上传需求设计。该应用完全在客户端运行，使用HTML5 Canvas API进行图片处理，无需任何服务器依赖。
- 单张图片处理: 调整单张图片尺寸并去除背景
- 批量图片处理: 同时处理多张图片，统一下载为ZIP文件
- 图片调整大小: 将图片转换为特定尺寸（640×640、240×240、50×50或750×400像素）
- 背景去除: 使用边缘检测算法自动去除背景
- 文件大小控制: 自动压缩图片确保不超过500KB
- 格式支持: 支持JPG、PNG、GIF格式，并自动选择最佳格式
- 移动端响应式: 针对桌面和移动设备使用进行优化
Resize-image/
├── index.html # 主要应用界面
├── script.js # 核心图片处理逻辑
├── style.css # 响应式样式
└── README.md # 用户文档
- 图片上传: 使用FileReader API在本地加载图片
- 预览和验证: 显示图片信息并验证格式
- 处理选项:
- 尺寸选择（正方形或矩形）
- 质量调整（10-100%）
- 背景去除开关
- Canvas处理:
- 正方形裁剪并居中对齐
- 矩形调整大小并保持宽高比
- 使用边缘检测去除背景
- 格式优化:
- 使用二分查找找到最佳JPEG质量
- PNG用于透明背景和小尺寸图片
- 支持时使用WebP作为备选
- 下载: 生成Blob URL并使用合适的文件名
- 多文件上传: 支持同时选择多张图片文件
- 批量预览: 网格化显示所有待处理图片的预览
- 统一设置: 为所有图片应用相同的处理参数
- 逐个处理: 异步处理每张图片，显示实时进度
- 结果展示: 网格化显示处理结果，支持单独下载
- 批量下载: 使用JSZip库将所有处理结果打包为ZIP文件下载
背景去除使用颜色边缘检测方法：
- 分析边缘像素以确定背景颜色
- 使用欧几里得距离计算颜色相似度
- 为背景像素设置透明alpha通道
- 可调节的灵敏度阈值（0-100%）
- 50×50: 使用PNG或高质量JPEG以保证清晰度
- 240×240: 平衡压缩与格式优化
- 640×640: 积极的JPEG压缩以控制文件大小
- 750×400: 矩形特定处理，保持宽高比
由于这是纯客户端应用，只需在现代网页浏览器中打开index.html即可。无需构建过程或服务器。
- 使用各种图片格式测试（JPG、PNG、GIF）
- 在不同背景类型上验证背景去除效果
- 测试文件大小限制（500KB限制）
- 检查移动设备上的响应行为
- 验证跨浏览器的下载功能
- 测试大量图片（10+张）的批量处理性能
- 验证批量上传的文件类型验证
- 测试批量处理进度的准确显示
- 验证ZIP文件下载的完整性
- 测试处理失败时的错误处理
- 验证单个下载与批量下载的一致性
- 测试模式切换时状态的正确重置
- 纯JavaScript，最小化外部依赖
- 使用Canvas API进行所有图片操作
- 使用FileReader API处理本地文件
- 使用Blob API生成和下载文件
- 使用JSZip库进行批量文件的ZIP打包
- 异步处理确保UI响应性
- 事件驱动的UI更新
- Promise-based批量处理流程
- 应用完全在客户端运行 - 无服务器上传
- 背景去除在具有纯色简单背景的图片上效果最佳
- 图片质量与文件大小的权衡会自动处理
- 中文界面，本地化的用户消息
- 专门为微信表情包上传需求设计
- 支持两种处理模式：单张处理和批量处理
- 批量处理使用统一的设置参数
- 异步处理确保UI不会阻塞
- 提供实时进度显示
- 支持单个图片下载和整体ZIP下载
- 自动生成有意义的文件名（包含原始名称和尺寸信息）
- 完善的错误处理和失败重试机制