🖼️ 图片分割工具

一个纯前端的图片分割工具，支持将图片按指定行列数分割并打包下载。无需后端，数据完全在本地处理，安全可靠。

✨ 功能特性

当前功能

• ✅ 多种上传方式

  • 文件选择上传
  • 拖拽上传
  • 剪贴板粘贴 (Ctrl+V)

• ✅ 灵活分割配置

  • 自定义行数（1-20）
  • 自定义列数（1-20）
  • 实时预览分割效果

• ✅ 高质量输出

  • PNG 格式输出（保持原图质量）
  • 智能文件命名：{count}_{row}_{col}.png
  • 从左到右、从上到下顺序编号

• ✅ 便捷下载

  • 一键 ZIP 打包下载
  • 批量获取所有分割图片

• ✅ 现代化设计

  • 响应式布局（支持桌面和移动端）
  • 深色主题 + 渐变色设计
  • 流畅的动画效果
  • 友好的错误提示

• ✅ 交互式网格 (v2.0)

  • 拖拽分割线调整网格
  • 实时预览调整效果
  • 解决图片位移问题

• ✅ 智能去背景 (v2.0)

  • 吸管工具吸取背景色
  • 泛洪填充算法 (Flood Fill)
  • 容差控制 (支持数值输入)
  • 保护主体内部颜色

• ✅ 隐私保护

  • 🔒 所有处理均在浏览器本地完成
  • 🔒 图片数据不上传服务器
  • 🔒 无需注册登录

🚀 快速开始

在线使用

直接双击 index.html 文件，在浏览器中打开即可使用。

本地运行

# 克隆项目
git clone <repository-url>
cd image-split

# 直接打开 index.html
# Windows
start index.html

# macOS
open index.html

# Linux
xdg-open index.html

📖 使用说明

基本流程

1. 上传图片

   • 点击"选择文件"按钮选择图片
   • 或直接拖拽图片到上传区域
   • 或复制图片后按 Ctrl+V / Cmd+V 粘贴

2. 设置分割参数

   • 输入行数和列数
   • (v2.0) 拖拽红色分割线微调网格位置
   • (v2.0) 点击"去背景"按钮，使用吸管去除背景

3. 分割图片

   • 点击"开始分割"按钮
   • 等待处理完成
   • 查看分割结果预览

4. 下载图片

   • 点击"下载 ZIP 包"按钮
   • 获得包含所有分割图片的 ZIP 文件

文件命名规则

假设分割为 2行 × 3列，生成的文件命名如下：

1_1_1.png  ← 第1张图片，第1行第1列（左上角）
2_1_2.png  ← 第2张图片，第1行第2列
3_1_3.png  ← 第3张图片，第1行第3列（右上角）
4_2_1.png  ← 第4张图片，第2行第1列（左下角）
5_2_2.png  ← 第5张图片，第2行第2列
6_2_3.png  ← 第6张图片，第2行第3列（右下角）

格式：{顺序号}_{行号}_{列号}.png

🏗️ 技术栈

技术	用途
HTML5	页面结构
CSS3	样式设计（深色主题、响应式布局）
Vanilla JavaScript	核心逻辑实现
Canvas API	图片分割处理、交互式网格、像素操作
JSZip	ZIP 文件打包
FileReader API	文件读取
Blob API	二进制数据处理

📁 项目结构

image-split/
├── index.html       # 主页面
├── style.css        # 样式文件
├── script.js        # 功能逻辑
├── README.md        # 项目说明
└── 需求.md          # 需求文档

ZIP 打包

使用 JSZip 库进行打包：

const zip = new JSZip();
splitResults.forEach(item => {
    zip.file(item.fileName, item.blob);
});
const zipBlob = await zip.generateAsync({ type: 'blob' });

📋 TODO 列表

近期计划

• GIF 动画生成 🎯

  • 将分割后的图片按顺序播放
  • 支持自定义帧间隔时间
  • 支持循环播放设置
  • 导出为 GIF 文件

• 批量处理

  • 支持一次上传多张图片
  • 批量应用相同的分割配置

• 高级选项

  • 自定义输出格式（JPEG/WebP）
  • 图片质量调整
  • 添加水印功能

• 用户体验优化

  • 预设分割模板（常用配置快捷选择）
  • 支持撤销/重做操作
  • 历史记录保存

长期计划

• 高级功能

  • 不等比分割（自定义每块的大小）
  • 图片旋转和裁剪
  • 滤镜效果

• 国际化

  • 英文版本
  • 多语言支持

• 性能优化

  • Web Worker 处理大图
  • 进度条显示
  • 内存优化

🌐 浏览器兼容性

浏览器	最低版本	状态
Chrome	90+	✅ 完全支持
Edge	90+	✅ 完全支持
Firefox	88+	✅ 完全支持
Safari	14+	✅ 完全支持
Opera	76+	✅ 完全支持

注意：应用使用现代浏览器 API（Canvas、Blob、FileReader），建议使用最新版浏览器以获得最佳体验。

🎯 使用场景

• 表情包制作：分割九宫格表情包
• 社交媒体：Instagram 九宫格图片
• 游戏开发：分割精灵图（Sprite Sheet）
• 设计师工具：快速切割设计稿
• 教学用途：图片分析和拼接教学

🤝 贡献指南

欢迎贡献代码、报告问题或提出建议！

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的修改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启一个 Pull Request

📝 开发日志

v2.0.0 (2025-12-01)

• ✨ 新增 交互式网格：支持拖拽分割线调整网格
• ✨ 新增 智能去背景：吸管工具 + 泛洪填充算法
• ✨ 优化 容差控制：支持数值输入和滑块调节
• ⚡ 优化 Canvas 渲染性能

v1.0.0 (2025-11-25)

• ✅ 实现基础图片分割功能
• ✅ 支持多种上传方式
• ✅ 实现实时预览
• ✅ 支持 ZIP 打包下载
• ✅ 现代化 UI 设计
• ✅ 响应式布局

📄 License

MIT License - 可自由使用、修改和分发

👨‍💻 作者

• GitHub: @pachimari

🙏 致谢

• JSZip - ZIP 文件处理库
• MDN Web Docs - Web API 参考文档
• claudecode - AI 代码生成

---

⭐ 如果这个项目对你有帮助，欢迎给个 Star！