精灵图切分工具

一个简单易用的网页工具，用于切分原始游戏素材并导出单独的帧图像。

功能特点

• 支持拖放上传图像文件
• 两种切分模式：自动识别和手动框选
• 自动识别图像中的独立图形区域
• 可调整识别参数和边距
• 实时预览切分结果
• 支持缩放查看原图和切分结果
• 导出单独帧图像或打包下载
• 生成处理图像的 Python 代码

使用方法

1. 上传图像

• 将图像文件拖放到上传区域，或点击上传区域选择文件
• 支持常见图像格式：PNG, JPG, GIF 等

2. 选择切分模式

自动识别模式

适用于包含多个独立图形的图像，可以自动检测并切分每个图形区域。

1. 选择"自动识别"选项
2. 在切分设置中调整参数：
   • 最小区域大小：忽略小于此尺寸的区域
   • 合并阈值：决定多近的区域会被合并
   • 边距大小：每个切分区域周围添加的空白边距
3. 点击"应用设置"查看切分结果

手动框选模式

适用于需要精确控制切分区域的情况，可以手动框选每个区域。

1. 选择"手动框选"选项
2. 在弹出的编辑器中创建选区：
   • 直接在图像上拖动创建选区
   • 使用表单精确设置选区位置和大小
   • 可以添加、编辑、删除选区
3. 点击"应用选区"确认并查看切分结果

3. 导出结果

• 导出所有帧：在页面上显示所有切分的帧
• 下载所有帧：将所有帧作为单独的图像文件下载
• 打包下载(ZIP)：将所有帧打包为一个ZIP文件下载
  • 可以自定义ZIP文件名
• 生成Python代码：生成用于处理图像的Python脚本

高级功能

缩放控制

• 原始图像和切分结果都支持1x、2x、4x和8x缩放查看
• 手动框选编辑器中也有缩放滑块，可以放大到800%进行精确选择

元数据设置

可以设置以下元数据，用于生成的Python代码和导出文件：

• 作物名称：用于文件命名
• 作物类型：分类（农作物、花卉、草药、蘑菇）
• 中文名称：用于元数据

帧命名

在切分结果中，可以为每个帧指定自定义名称，这些名称将用于导出的文件名。

技术说明

• 纯前端实现，无需服务器
• 使用HTML5、CSS3和原生JavaScript
• 使用Canvas API进行图像分析和处理
• 使用JSZip库处理ZIP文件
• 使用FileSaver.js实现文件下载
• 响应式设计，适应不同屏幕尺寸

浏览器兼容性

• Chrome (推荐)
• Firefox
• Edge
• Safari

本地使用

1. 下载所有文件
2. 在浏览器中打开 sprite_cutter_tool.html 文件
3. 无需安装，即可使用所有功能

注意事项

• 大图像文件可能会导致性能下降
• 建议图像尺寸不超过 2048×2048 像素
• 自动识别功能最适合处理具有透明背景的PNG图像
• 所有处理都在浏览器中完成，不会上传图像到任何服务器