宫格切图 — 4/9/16/25 格一键切开、单格换图、心形星形遮罩，本地处理不上传
宫格切图就是把一张图切成若干等份，再按顺序发出去。这里备了 4、9、16、25 四种宫格，选好格数，图片会自动按格子边界切开，预览里能直接看到切完的每一块。默认整张图铺满宫格，所以九宫格发到社交平台拼起来还是完整一张；如果某一块想换别的图，点中那个格子单独上传就行，位置和缩放都能拖。宫格外面还能套一层形状遮罩——心形、五角、六边形、邮票、花瓣、圆形、圆角矩形都行，遮罩压在整幅宫格上，只有形状里的像素留下，形状外默认透明，也可以填成指定颜色，做头像、做贴纸、做海报拼图都够用。预览里能开宫格线和透明棋盘格，方便看清每块边界和留白；原图是横图还是竖图都能用，铺满会裁掉多余部分，完整显示则留出透明边。格子间距、单格像素、输出格式都能调，导出支持单格、整图，或者一次打包成 ZIP。全部在浏览器本地用 Canvas 画，图片不会上传到任何服务器。
宫格预览
共 9 格1800 × 1800点格子选中，按住拖动可以挪动这一格里的图；换宫格会清空单格设置
格子
在预览里点一下任意格子，就能单独给它换图、缩放或挪位置
操作说明
- 把图片拖进上面的方框，或者点「选择图片」，也可以直接按 Ctrl+V 粘贴截图。选好之后右边会立刻出现宫格预览，默认是 3×3 的九宫格。
- 在右边「宫格」里切 4、9、16 或 25 格，再用「单格边长」定输出像素，整幅宫格的边长就是它乘以格数。想要留白就拉一点「间距」，间距会按单格宽度的百分比算，切出来每块四周是透明的。
- 想给某一格换图：在预览里点一下那个格子，然后在「格子」面板点「换成别的图」。换完可以拖动画布挪位置、拉滑块缩放；点「恢复原图」就把这一格退回整图分割，点「重置位置」只归位不改图。
- 要加形状就选一个遮罩：心形、五角、六边形、邮票、花瓣、圆形或圆角矩形。形状外默认透明，也能选成指定颜色。最后挑格式和质量，下载选中格、下载整图，或者一次打包成 ZIP。
常见问题解答
切出来的每一块能重新拼回原图吗？
能，只要格数和顺序没变。每一块都是严格按总图坐标切的，宽高相同、没有重叠也没有缝隙，按 1 到 N 的顺序排回去就是原图。所以下载时文件名会带序号，ZIP 里也是按这个顺序排的，别改名改乱了。
为什么加了间距之后，每一块边上多出一条透明边？
间距是故意留出来的。它按单格宽度的百分比算，等于把每块内容往内缩一点，四周空出透明像素。发到某些平台时这点留白能让格子之间不粘在一起；不想要就把间距拉回 0，切出来就是严丝合缝的。
遮罩为什么不是每一格都有一个完整的心形？
因为这个遮罩是压在整幅宫格上的，不是逐格套的。整张图只有一个心形窗口，落在边角的格子自然只分到这个心形的一部分，拼起来才是一个完整的心。如果每格都套一次，拼出来会变成九个小爱心。
选了心形又导出 JPEG，形状外面变成白块是怎么回事？
JPEG 格式本身没有透明通道，形状外的像素必须落一个实在的颜色。默认填白，可以在「形状外」里选成别的颜色。真需要透明就导出 PNG 或 WebP，这两种都带 alpha。
单格换图之后，还能不能只调这一格的缩放和位置？
能。选中那一格之后，直接在预览上按住拖动就能挪，右边滑块可以放大到三倍；「重置位置」只把缩放和偏移归零，不会把图换回去。想整格退回原图分割，点「恢复原图」；想一次清掉所有单格设置，点「清空单格」。
概念
宫格切图看着简单，其实要解决的是「一张图怎么变成 N 张还能拼回去」。关键在坐标系：整张图有一个总宽高，切成 n×n 之后，第 r 行第 c 列那一块的原点就是横坐标 c 乘以单格宽、纵坐标 r 乘以单格高，宽高各是总宽高除以 n。只要每一块都严格按这个公式取，拼回去时不会有缝，也不会有重影。真正容易出问题的是缩放：如果先切再缩放，每块单独插值，接缝处就会浮出一条淡淡的亮线；正确的顺序是先把整张图缩放到目标尺寸，再按像素坐标切，接缝才干净。遮罩也是一样——它不能对每一格各套一次，那样每格都会得到一个完整的心形；必须先把宫格拼成整幅，再整体套一次形状，落在边缘的格子自然只分到形状的一部分。这就是为什么这里所有形状的路径都按整幅宫格的边长算。至于形状外那块区域，PNG 和 WebP 能存透明，JPEG 不能，所以导出 JPEG 时会垫一层底色。
历史与由来
「切图」在印刷业里原本叫拼版。铅字时代，一张大图要印在几个版面上，得先算出每个版面的坐标，再把胶片按坐标裁开；这套手艺在 1970 年代被照相排版机接手，坐标从纸上搬进了机器。1993 年，网景的工程师开始用一张大图存放多个按钮状态，靠背景定位切出来，这就是雪碧图，它统治了网页图标整整十五年，直到图标字体和 SVG 才把它挤下去。更早的 8 位机时代，游戏里的角色和场景都是靠瓦片拼出来的，一张图集里按坐标取块，本质就是切图；Android 在 2011 年引入的九宫格拉伸图用的也是同一个词，只是它切的是可拉伸的边框，不是画面内容。九宫格作为大众玩法，则要等到智能手机普及：2011 年 Instagram 上线时只允许方形图，2013 年推出多图与网格主页，用户很快发现把一张图切成三行三列、按顺序发布，就能在主页上拼出完整画面。中文互联网把这件事叫「九宫格切图」，工具大多是一个网页，上传、切、下载，三步。同一时期，手机相册和社交平台开始把图片一律裁成方块预览，这也反过来推动了切图工具的普及。遮罩的历史更久：暗房里的遮挡曝光就是最原始的遮罩，放大机下压一张挖了洞的黑纸，只让洞里的部分感光；剪纸和印章里的镂空也是同一件事。1980 年代数字图像处理引入 alpha 通道，遮罩才从物理的纸变成了数学的乘加。1999 年的 SVG clipPath 和 2004 年 HTML5 草案里的 canvas clip，把「用一条路径当裁刀」变成了浏览器里的一行代码——今天点一下心形按钮看到的那个效果，走的就是这条路。
相关关键词
纠错反馈
如果发现工具问题或有任何建议，欢迎通过邮箱联系我们，我们会认真查看每一条反馈。
