九宫格图片切割

把一张图切成均匀的网格小图并打包下载,文件名按行列编号,一看就知道该按什么顺序发。

你放进来的文件全部由浏览器本地处理,不会上传,也不会存在我们的服务器上——页面加载完成后即使断网,工具照样能用。

图片切割 怎么用

  1. 1拖一张图进上面的方框,或者点击选择。
  2. 2挑一个网格。切割线会画在预览图上,位置一目了然。
  3. 3点切割,然后把所有小图打包成一个 .zip 下载。

九宫格切图主要是用来干什么的

主要就一件事:把一张大图分到好几个信息流位置上,让它在个人主页的网格里读起来是一整张画面。 Instagram 是主要场景,3×3 也是大多数人来这儿的原因。

也有别的用法:3×1 的长条适合做左右滑动的轮播;4×4 出十六块,能拼一面更大的墙;把一张精灵图或 者扫描的胶片样片切成单个文件,是同一个操作、不同的意图。

图片切割之后,发布顺序是最容易翻车的地方

个人主页的网格是从最新的帖子往回填的。你最后发的那条在左上角,越早的往右、往下推。

所以想让最终的画面读起来是对的,就得倒着上传:右下角那块先发,左上角那块最后发。搞反了,你就 得到一张镜像又倒置的图片摊在九条帖子上,而且不删掉全部没法补救。

这也是这里的文件名叫 tile-r1-c1tile-r1-c2 而不是从 1 编到 9 的原因。行和列直接告诉你这块 该在哪儿,倒着走一遍只需要读名字,不需要在脑子里记顺序。

把图片切成网格时的余数问题

大多数图片没法被 3 整除。一张 1000 像素宽的图切三列,每列 333.33 像素,那三分之一个像素总得有 个处理办法。

朴素做法是向下取整、每块都做 333 宽,这就悄悄扔掉了图片最后那一列像素。在 4×4 网格上两个方向都 这么干,你就从两条边上各少了三个像素的一条。这事没人会当场发现,直到有人想把切块拼回去、发现和 原图对不上。

这里的做法是余数给最后一列和最后一行,1000 变成 333、333、334。这些块彼此略有大小差异,而它们 加起来精确等于源图。

图片切割前先裁成目标形状

如果目标是正方形网格,切之前先把源图裁成正方形。否则平台会按它自己的规则把每块裁成方的,一个你 没选过的裁切会叠加在你选过的那个之上。

整个图片切割过程都在这个标签页里运行,图片不上传,尺寸上限只取决于浏览器的 canvas 天花板。

常见问题

这些小图该按什么顺序发?
倒着发。信息流是最新的排最前,所以想让九宫格从左到右、从上到下读起来是对的,就得先发最后一块、最后发左上角那块。文件名按行列编号就是为了让这件事可控。
我的图不能整除怎么办?
余数会给到最后一列和最后一行,而不是被丢掉。1000 像素切 3 份得到 333、333、334,所以这些小图能精确拼回原图。那种直接向下取整的实现会静悄悄地从每条边上少掉最多两个像素。
源图需要是正方形吗?
要做 3×3 的九宫格,需要。信息流会把每块裁成正方形,所以非正方的源图等于被裁了两次:一次在这里,一次在平台上。先自己裁成正方形,留下什么才由你决定。
透明会保住吗?
源图是 PNG 或 WebP 时会。每块小图保留源格式,所以透明背景切完还在。AVIF、GIF、SVG 的源会输出成 PNG。

更多免费工具