图片修改工具

一个功能强大的网页图片修改工具，适配微信表情包上传流程，支持调整图片尺寸、限制文件大小、抠图去除背景，以及图片分割功能。

功能特点

• 将图片调整为指定尺寸（640×640像素、240×240像素、50×50像素或750×400像素）
• 自动控制图片质量，确保输出文件不超过500KB
• 抠图功能：去除图片背景，只保留主体部分，背景变为透明
• 图片分割功能：将一张大图片分割成多个小图片，支持网格分割和自定义分割
• 图片预览功能
• 支持常见图片格式（JPG、PNG、GIF等）
• 简洁美观的用户界面
• 批量处理功能：同时处理多张图片，统一下载为ZIP文件

使用方法

单张图片处理

1. 打开 index.html 文件
2. 点击"选择图片"按钮上传您要处理的图片
3. 选择目标尺寸（640×640像素、240×240像素、50×50像素或750×400像素）
4. 通过质量滑块调整图片质量（可选）
5. 如需抠图去除背景，勾选"抠图（去除背景）"，并调整灵敏度（可选）
6. 点击"处理图片"按钮
7. 处理完成后，查看结果并点击"下载图片"按钮保存

图片分割功能

1. 打开 index.html 文件，点击顶部导航切换到"图片分割"模式
2. 点击"选择要分割的图片"按钮上传一张大图片
3. 选择分割方式：
   • 网格分割：指定行数和列数，将图片均匀分割成网格
   • 自定义分割：指定分割数量，选择布局方式（自动、水平、垂直、方形网格）
4. 设置每块图片的尺寸（保持原尺寸或调整为指定大小）
5. 调整图片质量和输出格式（JPEG/PNG）
6. 点击"开始分割"按钮
7. 分割完成后可以：
   • 预览所有分割块，查看位置和尺寸信息
   • 单独下载某个分割块
   • 点击"下载全部（ZIP）"按钮将所有分割块打包下载

分割功能特点：

• 智能参数建议：根据图片尺寸自动推荐最佳分割参数
• 灵活的布局选项：支持水平、垂直、网格等多种分割方式
• 精确的尺寸控制：可以保持原尺寸或统一调整为指定大小
• 有序的文件命名：自动生成包含位置信息的文件名

批量图片处理

1. 打开 index.html 文件，点击顶部导航切换到"批量处理"模式
2. 点击"选择多张图片"按钮或拖拽多个图片文件到上传区域
3. 在预览区域查看所有待处理的图片
4. 统一设置处理参数（尺寸、质量、抠图等）
5. 点击"开始批量处理"按钮
6. 等待所有图片处理完成，查看处理进度
7. 处理完成后可以：
   • 单独下载某张图片
   • 点击"下载全部（ZIP）"按钮将所有图片打包下载

技术实现

• 纯前端实现，无需服务器支持
• 使用HTML5的Canvas API进行图片处理
• 利用JavaScript的Blob API和FileReader API处理文件
• 基于边缘像素检测的背景去除算法
• 响应式设计，支持移动设备访问
• 图片分割技术：
  • 精确的Canvas裁剪算法，确保分割块尺寸准确
  • 支持多种布局计算（网格、水平、垂直、自适应）
  • 异步处理机制，避免大图片分割导致界面卡顿
  • 智能参数推荐算法，根据图片特征自动设置最佳分割参数
• 批量处理技术：
  • 使用Promise进行异步图片处理
  • 集成JSZip库进行文件压缩打包
  • 实时进度显示和状态管理
  • 支持拖拽上传多文件

抠图功能说明

抠图功能基于以下原理：

• 分析图片边缘像素的颜色特征，判断可能的背景色
• 计算每个像素与背景色的相似度
• 根据用户设置的灵敏度阈值，将相似度高的像素设为透明
• 抠图后的图片保存为PNG格式以保留透明效果

灵敏度调整：

• 灵敏度值较低：只有与背景色非常接近的像素会被去除，但可能导致主体图像边缘失色
• 灵敏度值较高（推荐）：更多的像素会被识别为背景并去除，主体图像保留完整
• 默认设置为90%，对大多数图片都有较好的效果

注意：对于复杂背景或颜色渐变的图片，可能需要手动调整灵敏度以获得最佳效果。

注意事项

• 图片处理在浏览器中完成，不会上传到任何服务器
• 为保证最佳效果，建议使用Chrome、Firefox或Edge等现代浏览器
• 如需处理大尺寸图片，可能需要较长处理时间
• 抠图效果与图片的背景复杂度有关，简单纯色背景效果最佳

图片分割注意事项

• 分割功能支持大图片处理，但建议原图尺寸不超过5000×5000像素
• 分割数量过多时可能需要较长处理时间，建议单次分割不超过100块
• 网格分割时，行数和列数的乘积即为总分割块数
• 自定义分割时，系统会根据选择的布局方式自动计算最优排列
• 分割后的文件名包含位置信息，格式为：原文件名_split_行数x列数_位置.扩展名

批量处理注意事项

• 批量处理时建议单次处理不超过20张图片，以保证处理速度
• 处理过程中请勿关闭浏览器或刷新页面
• 文件名将自动包含原始名称和尺寸信息，便于识别
• ZIP下载功能需要较新版本的浏览器支持
• 如遇处理失败，可检查图片格式是否支持或尝试单独处理该图片

本地运行

只需将所有文件下载到本地，然后在浏览器中打开index.html文件即可使用。

图片修改工具/
├── index.html      # 主页面
├── style.css       # 样式表
├── script.js       # JavaScript脚本
└── README.md       # 说明文档