支持网格、精确切片与精灵帧的图片拆分工具

01

图片拆分如何把一张原图变成精确切片

图片拆分 — 生成文件之前先检查每一条切线

图片拆分 — 最终网格最重要时，选择按行列完成图片拆分。工具会尽可能均匀地分配可用区域，并按照确定规则处理不能整除的余数像素，因此所有切片会连续覆盖原图，不会留下隐藏空隙。常用设置可以快速切成左右两半、上下两半、四宫格或九宫格，自定义设置最高为20行乘20列。

图片拆分 — 游戏素材、打印流程或精灵图已经规定尺寸时，选择精确切片尺寸。图片拆分会从外边距之后开始，按照切片尺寸加间隔逐格前进；如果原图不能整除，最右侧或最下方会保留较小的最后一块。普通照片可以把外边距和间隔保持为零，精灵图则可以跳过已有边框与帧间空白。

图片拆分 — 图片拆分 — 带编号预览会在导出前把每个矩形与文件编号对应起来。标准顺序从左上角开始逐行向右，反向顺序则把右下角编号为01，适合某些需要倒序发布的流程。你可以先单独下载一张切片检查边界，也可以在方案确认后让浏览器依次编码并生成完整ZIP。

• 图片拆分 — 2列1行适合拆成左右两半。
• 图片拆分 — 1列2行适合拆成上下两半。
• 图片拆分 — 3列3行适合制作九宫格或九块打印面板。
• 图片拆分 — 精确尺寸配合外边距和间隔适合拆分精灵图。

02

图片拆分 — 选择行列网格或精确切片尺寸

图片拆分 — 每一条切线都对应原图像素矩形

图片拆分 — 图片拆分会使用解码后得到的原始像素宽度和高度计算所有矩形。网格模式先扣除外边距和切片间隔，再把剩余宽度与高度分配给指定行列；精确尺寸模式按照设定宽高逐格前进，并在存在余数时保留较小的边缘切片。预览与文件编码器读取同一份方案，所以编号、行列位置、尺寸和最终文件名不会来自另一套近似计算。

03

图片拆分 — 让原始图片保留在浏览器本地

图片拆分 — File与Canvas API避免处理型上传

图片拆分 — 图片拆分只接收用户本地选择的一个File，并通过createImageBitmap()完成解码。Canvas的drawImage()为每张切片读取一个源矩形，再把该区域复制到临时导出画布。实现中没有图片上传请求、云端项目或远程处理端点。清空工作区时会关闭已解码bitmap并撤销本地对象URL，设备中的原文件不会被覆盖。

04

图片拆分 — 单独导出切片或生成完整ZIP

图片拆分 — 格式、质量与文件名都保持明确

图片拆分 — 图片拆分可以按照浏览器当前支持导出PNG、JPEG或WebP。PNG适合文字、硬边缘与透明区域，JPEG适合照片并用透明度换取更紧凑的结果，WebP适合明确支持它的目标。单张下载只编码所选矩形；ZIP下载会按照当前编号顺序编码完整方案，使用补零文件名保存每个Blob，并在浏览器工作期间持续报告进度。

05

这款图片拆分工具如何验证

图片拆分 — 官方浏览器资料与可复现的几何检查

图片拆分验证使用尺寸与颜色都已知的测试图片，让预期切片边界可以直接计算。检查会分别运行网格与精确尺寸模式，加入非零外边距和间隔，对照预览与切片坐标，重新读取导出图片尺寸，并检查ZIP目录。同时还会扫描前端源文件，拒绝fetch、XMLHttpRequest、WebSocket、EventSource与sendBeacon等网络传输能力，让浏览器本地处理边界可以被实际验证。