Image Splitter
项目介绍
这是一个基于Web技术的图片分割工具。
旨在帮助游戏开发者或UI设计师快速、方便地从一张雪碧图 (Sprite Sheet) 或图片中，提取出所有独立的精灵或icon资源。
本工具完全本地运行，保证了素材的安全性。
开源地址：https://github.com/ask-tao/image-splitter（
欢迎给个Star
）
功能特性
-
分割模式:
-
框选模式: 支持自动识别和用鼠标拖拽创建选框。在任意位置创建、移动、缩放选框。支持按住
Shift键保持纵横比缩放。
-
内边距模式:
-
固定宽高模式:
-
-
网格模式: 通过定义一个可缩放的网格区域及行列数，快速进行均匀的网格分割。
-
行列设置:
-
行列设置:
-
-
编辑操作: 支持选中、移动、删除选框，并支持通过8个锚点进行缩放。
-
画布控制: 支持画布的缩放和全局外边距调整。
-
快捷键: 支持常用功能快捷键
-
导出功能: 一键将所有选框内的图片打包成一个
.zip压缩文件供下载。支持自定义导出文件名的前缀和连接符。
技术方案及其原理
本工具主要采用现代前端技术栈构建，核心原理围绕 Canvas 的像素级操作和图像处理算法。
-
核心框架: Vue 3 + Vite + TypeScript
-
UI 库: Element Plus
-
图形与交互: HTML5 Canvas API
- 渲染: 负责将用户导入的图片绘制到主画布上，并根据数据实时渲染所有的选框和锚点。
-
交互: 通过监听画布的
mousedown,mousemove,mouseup等鼠标事件，实现选框的创建、选择、移动和缩放等所有手动编辑逻辑。 -
图像裁剪: 在导出和预览时，利用
drawImage()方法从原始图片中精确地提取出指定选框内的像素数据。
-
核心算法：自动识别原理
自动识别的核心是一种连通分量标记 (Connected-component labeling) 算法，通过广度优先搜索 (BFS) 实现：- 像素扫描: 将整个图片看作一个二维像素网格。算法从左上到右下逐个像素进行扫描。
- 寻找“岛屿”: 当遇到一个尚未被访问过的“不透明”像素时（Alpha > 0），就认为发现了一个新的图像块（“岛屿”），并从这个像素开始进行搜索。
- 洪水填充 (Flood Fill): 以该像素为起点，启动广度优先搜索 (BFS)。算法会查找所有与它相邻（上下左右）且同样是不透明的像素，并将它们加入一个队列中。这个过程不断持续，直到探索完所有与初始点相连的像素，就像洪水蔓延过整座小岛一样。
-
边界记录: 在 BFS 的过程中，用变量记录下所有被访问过的像素中
x和y坐标的最小值和最大值 (minX,maxX,minY,maxY)。这四个值就构成了该“岛屿”的最小外接矩形。 -
访问标记: 为了防止重复识别和死循环，所有被访问过的像素都会被记录在一个
visited矩阵中，后续扫描会直接跳过它们。 - 循环: 当一个“岛屿”搜索完毕后，外层的像素扫描会继续进行，直到找到下一个尚未被访问的“岛屿”，重复以上过程，直到所有像素都被访问完毕。
桌面端应用 (Desktop Application)
本项目支持打包成原生的桌面端应用（macOS, Windows, Linux），安装后支持自动更新。你可以在Releases页面下载最新的桌面版应用：
-
Mac:
Image.Splitter-x.x.x-arm64.dmg -
Windows:
Image.Splitter.Setup.x.x.x.exe -
Linux:
Image.Splitter-x.x.x-arm64.AppImage
此外也可以自行构建web项目或静态单html文件直接运行。
