AutoSpriteSlice

一个纯前端的精灵图自动切分工具，基于 PNG 透明通道进行连通域检测，并导出每个独立物体切片。

仓库当前核心文件：

• item-sprite-slicer.html：单文件应用，包含 UI、图像处理算法、下载逻辑。

功能特性

• 上传带透明背景的图片（推荐 PNG）
• 基于 alpha 阈值识别前景像素
• 使用 Flood Fill（4 邻域）提取每个连通区域
• 自动生成每个区域的最小外接矩形切片
• 支持 ZIP 批量下载（JSZip），不支持时自动退化为逐张下载

算法实现原理

核心目标：把一张大图中的多个独立物体自动分离成多个小图。

1. 前景判定（透明通道阈值）

算法读取整张图的 RGBA 数据，只使用 alpha 通道作为是否属于前景的判定依据：

• alpha >= alphaThreshold：视为前景像素（物体）
• alpha < alphaThreshold：视为背景像素（透明区域）

这样可以避免受 RGB 颜色变化影响，特别适合透明背景精灵图。

2. 连通域扫描

从左到右、从上到下遍历所有像素：

• 若像素已访问，跳过
• 若像素是背景，标记访问并跳过
• 若像素是前景，触发一次 floodFill，提取整个连通块

访问标记使用 Uint8Array(width * height)，内存和访问性能都比较稳定。

3. Flood Fill（4 邻域）

floodFill 从起点前景像素出发，扩展到其 4 个方向邻居（上、下、左、右）：

• 邻居在图内
• 邻居未访问
• 邻居 alpha 仍满足阈值

满足条件就入栈继续扩展，直到该连通块遍历完成。

在遍历过程中持续更新：

• minX / maxX
• minY / maxY

最终得到该连通块的最小外接矩形：

• x = minX
• y = minY
• width = maxX - minX + 1
• height = maxY - minY + 1

4. 噪点过滤

代码使用 minArea 过滤过小区域：

• 当前实现判断条件是 rect.width * rect.height >= minArea

这表示按外接矩形面积过滤，而不是按真实前景像素数过滤。优点是计算简单；缺点是细长或中空形状可能被“放大估计”。

5. 切片导出

每个连通域矩形会被绘制到一个独立 canvas，再输出为 PNG Data URL：

• 用于页面预览
• 用于逐张下载
• 或写入 ZIP 打包下载

复杂度分析

设图像像素总数为 N = width * height。

• 时间复杂度：O(N)
  • 每个像素最多被访问一次
  • Flood Fill 总遍历规模不超过 N
• 空间复杂度：O(N)
  • visited 数组占 N
  • Flood Fill 栈在最坏情况下也可能接近 N

关键实现位置

• sliceWithOffsets：绘制原图、调用连通域检测、生成切片
• findConnectedRegions：全图扫描 + 连通域提取 + 最小面积过滤
• floodFill：4 邻域扩展 + 边界框统计

都在 item-sprite-slicer.html 的内联脚本中。

使用方式

1. 直接在浏览器打开 item-sprite-slicer.html
2. 选择图片
3. 调整参数：
   • alphaThreshold：透明阈值（默认 10）
   • minArea：最小区域面积（默认 16）
4. 点击“自动切分”
5. 使用“全部下载”或“逐张下载”导出结果

适用场景与限制

适用场景：

• 游戏道具图标拆分
• 透明背景素材自动切片
• 前端快速离线处理（无需后端）

限制说明：

• 只使用透明通道，非透明背景图效果会下降
• 当前为 4 邻域连通，不会把“仅对角接触”像素视为同一区域
• minArea 依据矩形面积，不是像素真实面积
• 大图处理在主线程执行，超大图会有短暂卡顿