CodeKitHub工具介绍
图片分割器将单张源图片分割成一组大小相等的小块网格，最常见的用途是 Instagram 的“网格布局”潮流——一张宽幅照片或插画以一系列独立的正方形图像发布，当它们在个人主页网格中一起显示时会重新拼合成原图。
这项技术本身是简单的几何运算——将源图片的宽度和高度分别除以列数和行数，每个得到的矩形被单独裁剪为一个文件——但在通用图片编辑器中手动精确完成这项工作既繁琐又容易出错，尤其是在 3x3 或更大的网格中，一块图的微小错位就会打乱整个序列。
这个工具根据图片的实际像素尺寸精确计算网格边界，并使用 HTML5 Canvas API 完全在你的浏览器中渲染每一块图，因此每一块都能精确对齐，图片本身也永远不会离开你的设备。
为什么使用它？
- 你负责公司海外账号运营，要给品牌的 Instagram（面向海外客户，不是国内用户）做一次 3x3 网格翻新，需要九张小图裁得像素级对齐，观众划过主页时接缝才不会露馅。
- 跨境电商上新，想让产品的全景横幅图以四连发轮播的形式展开，而不是硬塞进一张方形封面里显得局促。
- 之前试过用普通修图软件手动切网格图，结果几张小图对不齐，不想在 9 格网格上再犯一次这种错——一块裁歪就会打乱整个序列。
- 需要把九张（或四张、六张）小图一次性备好再开始排期发布，而不是每发一张就临时裁一张——打包下载的 ZIP 能一次拿到全部素材。
- 想在正式确定发布顺序之前，先预览一下拼在一起的网格效果，好在图还没发出去之前就发现裁切线不美观或主体偏心的问题。
- 100% 本地：你的图片完全在浏览器中使用 Canvas 处理，永远不会上传到服务器。
使用方法
- 点击拖放区域（或直接拖放）从你的设备中选择一张图片。
- 从下拉菜单中选择网格尺寸——1x2、1x3、2x2、3x3 或 1x4。
- 在控制选项下方即时预览分割出的小块。
- 点击“Download all (ZIP)”，将每个小块作为一个编号的 PNG 文件打包在一个 ZIP 压缩包中下载。
示例
输入
一张 1200×1200px 的正方形照片，网格：3x3输出
9 张各为 400×400px 的小图，tile-1.png 到 tile-9.png小块按从左到右、从上到下编号——与你上传到 Instagram 的顺序相同（从右下角的小块开始，依次向前，这样每次发布新帖子时，旧的小块会被向下推，网格才能正确地重新拼合）。
常见网格尺寸及其用途
不同的网格尺寸适合不同类型的帖子和展示效果。
| 网格 | 小块数 | 典型用途 |
|---|---|---|
| 1x2 | 2 | 简单的前后对比或两部分展示 |
| 2x2 | 4 | 小型方形展示，快速发布 |
| 1x3 | 3 | 跨越三个连续帖子的单行展示 |
| 3x3 | 9 | 整个主页网格的完整呈现——经典的 Instagram 网格布局 |
| 1x4 | 4 | 一张宽幅全景图分割成连续四个帖子 |
相关工具
如需其他本地图片编辑工具，可以试试这些。
拿到干净漂亮的网格效果：原图准备建议
分割本身是精确的数学运算，但最终网格效果好不好，很大程度上取决于你上传的原图——上传前养成几个习惯，能省去发布后一堆麻烦。
做 3x3 或 2x2 网格时，尽量用正方形（或接近正方形）的原图，否则 Instagram 发布时会自己把你的小图裁成方形，可能会切掉分割工具原本保留下来的内容。让图中重要的细节避开网格线可能经过的位置——一张脸或视觉焦点恰好落在小图边界上，即使裁切在数学上完全精确，视觉上也会显得很割裂。分割前尽量用手头分辨率最高的原图导出；反正 Instagram 上传时都会压缩，用更大的原图开始分割，能让每块小图在经历那次压缩后保留更多细节，比用一张本来就是按单张帖子尺寸准备的图效果要好得多。
常见问题
Instagram 个人主页网格应该用哪种网格尺寸？
3x3（9 块）是最常见的选择，因为它恰好填满标准的三列 Instagram 个人主页视图一次。2x2 或 1x3 分割适合较小规模的展示，不会占据你最近的整个网格。
小块应该按什么顺序发布？
由于 Instagram 的网格是最新帖子显示在最前面（左上角），你通常需要按相反顺序发布小块——从网格的右下角小块开始，以左上角小块结束——这样当所有小块都发布完成后，它们才能从左到右、从上到下正确阅读。
图片需要是完美的正方形吗？
不需要，但对于对称的网格布局（如 3x3），正方形的源图片会得到正方形的小块，这与 Instagram 裁剪方形网格帖子的方式一致。非正方形的图片仍然会均匀分割，只是得到矩形而非正方形的小块。
小块以什么文件格式保存？
每个小块都以 PNG 文件的形式导出，保存在下载的 ZIP 压缩包中，这样可以保留质量而不会经过有损再压缩。
我的图片会被上传到任何地方吗？
不会。图片直接读入你的浏览器，并完全在客户端使用 Canvas API 进行分割。没有任何内容发送到服务器——ZIP 文件也是在你的浏览器中本地打包的。
分割之后画质会比原图差吗？
除了导出这一步之外不会有额外的重新压缩——每一块小图都是直接从源图片的像素数据裁剪出来，并以 PNG（无损格式）导出，所以唯一的画质损耗来自 Instagram 自身上传时的压缩，和你直接发一张普通照片遇到的情况是一样的。
如果原图的尺寸不能被网格数整除，多出来的像素会怎么处理？
工具会根据图片实际的宽高除以列数和行数来计算每块小图的边界，多出来的余数会被均摊到各块边界上，而不是被整段裁掉——所以你不会丢失一整条图像内容，只是在尺寸不能整除的情况下，各小块之间可能相差一两个像素。
除了 Instagram，网格分割还能用在别的地方吗，比如网站横幅或印刷海报？
可以——它本质上就是把一张大图裁成若干等分小块，任何需要把大图拆分成多块的场景都用得上，比如多联印刷排版、网站首页的拼接式大图横幅，或者实体照片墙的分块打印。Instagram 网格潮流只是大家最常用它的场景而已。
为什么小图编号是从左到右、从上到下，而不是按 Instagram 实际发布的顺序？
编号遵循自然的阅读顺序，方便你查看预览时快速对照，而不是你实际上传时的倒序——因为 Instagram 网格是最新帖子显示在最前面，所以你实际发布时需要从编号最大（右下角）的小图开始，倒着往回发到 1 号，这样等所有小图都发布完，整个网格才能正确拼合。