精灵图拆分指南
上传一张精灵图，工具会自动找出图中的每个元素，并把它们分别导出为透明背景的 PNG。大多数图片用默认设置就够了；本文后半部分说明效果不理想时怎么调整。
1. 什么是精灵图
精灵图（Sprite Sheet，也叫雪碧图、图集）是把很多小图——角色动画帧、图标、道具、特效等——排在同一张大图里。游戏开发、网页和 UI 设计中都很常见。
需要把其中的元素单独取出来时，手动裁剪既慢又容易留下多余空白，元素大小不一、排列不规则时更麻烦。本工具会自动识别每个元素的轮廓，按轮廓裁剪出来。
2. 三步完成拆分
自动识别
上传后会自动开始识别，不需要点其他按钮。完成后，图片上会用框标出每个元素，上方显示「识别到 N 个元素」。
下载
点击「下载拆分结果（ZIP）」。压缩包里每个元素一张透明 PNG，按编号命名（如 001.png、002.png），和预览上的编号一一对应。拆分和打包都在你的浏览器里完成。
要处理另一张图，再次点击或拖入新图片即可。上传的图片约 24 小时后自动删除，详见隐私政策。
3. 看懂识别结果
- 识别到 N 个元素：先和图里实际的元素数量对比。数量偏多，通常是元素被切碎或出现了噪点；偏少，通常是几个元素粘在了一起。
- 显示编号：在每个框旁显示编号，方便对照下载后的文件名。
- 旋转框：改用贴合元素方向的旋转框显示，便于检查倾斜的元素。只影响预览，导出的图片不变。
4. 高级参数说明
结果不理想时，展开工具下方的「高级参数（效果不理想时再调）」。每次修改后会自动重新识别；「恢复默认」回到初始设置，「重新识别」用当前设置再识别一次。你调整过的参数会保存在当前浏览器里，下次打开时继续使用。
| 参数 | 默认值 | 范围 | 作用 |
|---|---|---|---|
| 填补缺口 | 0 | 0 – 24 | 把断开的边缘连起来。次数越多，碎块越容易连成整块，但相邻元素也越容易粘在一起。 |
| 向外扩展 | 0 | 0 – 24 | 把每个元素的范围向外扩。能把靠得很近的碎块并到一起，框也会随之变大。 |
| 边缘阈值（低） | 50 | 0 – 255 | 越小，越容易把颜色较淡、对比度低的边缘也识别进来。 |
| 边缘阈值（高） | 230 | 0 – 255 | 越大，只保留越明显的边缘；背景有纹理或渐变时可以调高。 |
| 平滑程度 | 0.1 | 0.1 – 3 | 识别前先把图片抹平一些。越大，越能忽略噪点和细小纹理，但细小元素也可能被忽略。 |
| 连接范围（横向 / 纵向） | 1 / 1 | 1 – 12 | 「填补缺口」「向外扩展」每次作用的宽度和高度。缺口主要是横向的就调大横向，反之调大纵向。 |
建议一次只改一项、每次改一点，看识别数量和框的变化再决定下一步。想了解这些参数背后的边缘检测原理，可以阅读Canny 边缘检测详解。
5. 效果不理想时
一个元素被切成了好几块
调大「填补缺口」，不够再调大「向外扩展」；缺口比较宽时，同时调大「连接范围」。也可以调低「边缘阈值（低）」，让淡的边缘也连上。
几个元素被识别成了一块
调小「填补缺口」「向外扩展」和「连接范围」；仍然粘连时调高「边缘阈值（高）」。如果元素本身就紧贴在一起，请先在图片编辑软件里拉开间距再上传。
出现很多细小的多余框
调高「平滑程度」，或调高「边缘阈值（低）」，让噪点和细小纹理不再被当成边缘。
整张图被识别成一个大框
通常是背景有纹理或渐变。调高「边缘阈值（高）」；背景很复杂时，建议先把背景换成纯色或透明再上传。
某个元素没有被识别出来
元素和背景颜色太接近。调低「边缘阈值（低）」，并把「平滑程度」调回较小的值；仍然不行时，请先提高图片对比度或更换背景色。
6. 怎样的图片效果最好
- 背景干净：纯白、纯黑或透明背景最容易识别。
- 元素之间留出间距：至少留几个像素，否则相邻元素容易被识别成一块。
- 优先用 PNG：JPG 的压缩会在边缘产生杂色，可能影响识别；PNG 还能保留透明背景。各格式的区别见图片格式对比。
- 大图先缩小或裁剪：超过 4000×4000 像素或 4MB 的图片无法上传。