九宫格切图
将图片切割为3×3九宫格，适合社交媒体分享
拖拽图片到此处，或点击选择文件
支持 JPG、PNG、WebP、BMP、GIF 格式
什么是九宫格切图？
图片九宫格工具会把一张图片切成等大的小图，常见用法是 3×3 的九张图。按正确顺序发布到 Instagram、朋友圈、微博等平台后，个人主页或动态网格中会重新拼出原始大图，形成更强的视觉展示效果。它适合品牌活动、产品预告、活动海报、作品集展示和需要整体构图的社交媒体内容。使用时要注意原图比例、人物和文字的安全边距，以及上传顺序；只要其中一块位置错了，整体画面就会被打乱。
使用方法
使用方法
- 上传或拖放图片
- 工具自动将其分割成 9 块
- 点击任意一块以单独下载
- 点击「全部下载」以一次性保存所有块
裁剪注意事项
- 请使用与预期最终宽高比一致的图片；自动分割无法恢复已错误裁剪或填充的内容。
- 发布前请预览所有九块，尤其是文字、面部或产品边缘跨越分割线时。
使用场景
技术原理
图片九宫格切割器基于 HTML5 Canvas 2D API（WHATWG HTML Living Standard §4.12，最初在 W3C 2014 年 HTML5 推荐标准中定义）。流程分三层：将源像素解码为 CanvasImageSource，通过 drawImage 的 9 参数形式将这些像素的子矩形复制到离屏画布，然后通过 canvas.toBlob() 将离屏画布编码为 PNG。所有操作均在浏览器标签页中完成——无需上传、无服务器、无远程渲染。 解码步骤比看上去更重要。来自 <input type='file'> 或拖放 DataTransferItem 的 File 通过 FileReader.readAsDataURL（或在现代代码中通过 URL.createObjectURL）读取为 Blob URL，浏览器将其交给 Image 加载器。Image 元素在平台图片编解码器（Chromium 上为 libpng/libjpeg-turbo/libwebp，WebKit/Gecko 上为等效实现）解码位图后触发 'load' 事件。以此方式加载的非 CORS 图片被视为「受污染」——getImageData 会抛出 SecurityError——因此切割器只使用 drawImage 而不读回像素数组，完全绕过了 CORS 问题。对于非常大的图片（长边超过约 8K），某些引擎会将位图保存在 GPU 内存中，因此 canvas.toBlob 可能需要 GPU→CPU 回读，在手机上耗时约 30-100 ms。 裁剪是每次切片的单次 drawImage 调用：ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)——前三对是源矩形（sx、sy、sw、sh），后三对是目标画布上的目标矩形。对于 1920×1080 照片的 3×3 切割，每个切片的源矩形为 640×360，起始于 (col×640, row×360)。目标画布的尺寸精确匹配切片（640×360），然后 canvas.toBlob(blob => ..., 'image/png') 运行平台 PNG 编码器。选择 PNG 而非 JPEG 是因为网格切片通常是带有锐利文字和 UI 元素的干净矩形裁剪，无损编码很重要；JPEG 的 8×8 DCT 块会使边缘模糊。 批量下载对每个 Blob 使用 URL.createObjectURL，通过 <a download> 合成点击触发下载，短暂延迟后（通常 60-120 秒，平台对未使用 Blob URL 的生命周期）调用 revokeObjectURL。对于 9 个切片，这会连续触发 9 次下载事件；某些浏览器会限制同一标签页的多次下载，因此页面通常在点击之间间隔 50-200 ms 的 setTimeout。性能方面，手机上的瓶颈通常是 PNG 编码器（libpng 每次编码单线程），而非 drawImage；对于 9 个 1080p 切片，中端 Android 预计总耗时 200-500 ms，桌面 Chromium 为 100-200 ms。
- 流程：FileReader 或 URL.createObjectURL → Image 元素 → HTMLCanvasElement → drawImage 9 参数裁剪 → canvas.toBlob('image/png') → URL.createObjectURL + <a download>。
- drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) 是 9 参数重载，将源矩形 (sx,sy,sw,sh) 裁剪到目标矩形 (dx,dy,dw,dh)；这是执行切割的单次 API 调用。
- 未提供 CORS 头的源图片会污染画布——getImageData 会抛出 SecurityError，因此切割器不读取像素数组，只进行位块传输和编码。
- canvas.toBlob 是异步非阻塞的（回调在后续微任务中触发），而旧版 canvas.toDataURL 是同步的，对于大图片会冻结主线程。
- 对于 N×M 图片的 3×3 切割，每个切片为 (N/3) × (M/3)；不可整除的尺寸会在右/下边缘产生 1 像素的余数，通过 Math.floor 处理，必要时显式处理余数切片。
- 网格切片选择 PNG 而非 JPEG，因为每个切片是带有锐利边缘（文字、UI、图表）的矩形裁剪，8×8 DCT 块会模糊边界线。
- 批量下载对每个 Blob 使用 URL.createObjectURL + <a download> 点击；浏览器限制同一标签页的多次下载，因此页面通常将点击间隔 50-200 ms，并在点击后撤销 Blob URL 以释放内存。
- 性能瓶颈是平台 PNG 编码器（libpng 每次编码单线程），而非 drawImage；9 个 1080p 切片在中端手机上运行约 200-500 ms，桌面 Chromium 约 100-200 ms。
示例
1:1 正方形切图（Instagram 帖子）
输入： 1080 x 1080 px
输出： 9 张 360 x 360 px（3x3 网格）
用途： Instagram 多图轮播预览、小红书九宫格16:9 横屏切图（YouTube 缩略图）
输入： 1920 x 1080 px
输出： 9 张 640 x 360 px（3x3 网格）
用途： YouTube 缩略图 A/B 测试、多平台 banner 变体9:16 竖屏切图（TikTok / Reels）
输入： 1080 x 1920 px
输出： 9 张 360 x 640 px（3x3 网格）
用途： 短视频封面方案探索、Story 预览常见问题
九宫格图片工具能做什么？
把一张图切成等大小的网格（例如 3×3、2×4），让你把每个格子作为单独的 Instagram 风格九宫格发布，或拼成拼图/海报。每个格子都会被导出为独立的 PNG/JPEG 文件。
图片会被上传吗？
不会。网格切分完全在你的浏览器中通过 canvas 完成，图像数据不会离开你的设备。
支持哪些网格尺寸？
常见预设有 3×3（Instagram 巨幅九宫格）、3×1（横幅三联）、2×2、4×4、9×16，通常也允许自定义行列数。最大尺寸取决于浏览器内存——高分辨率源图上的超大网格可能超过 canvas 大小限制。
如何按正确顺序把切片发到 Instagram？
Instagram 的网格是从右到左、从上到下填充的（所以 3×3 的第一张发布在右上角，最后一张在左下角）。页面会把切片标号 1-9，按 9、8、7、6、5、4、3、2、1 的顺序上传，可与视觉布局对齐。部分页面会提供顺序提示指引。
为什么导出的切片有些对不齐？
源图尺寸需要能被网格数整除才能整齐切分。页面要么裁掉右/下边缘，要么缩放图像以适配；请检查当前选用的是哪种方式。如果之后要把切片实物拼贴起来，亚像素的对齐误差会沿着网格累积。
输出格式和分辨率是什么？
默认按源分辨率输出 PNG。对于 Instagram，每个切片建议至少 1080×1080 像素（4×4 网格则源图 4320×4320）。实物海报打印时请使用更高的源分辨率，并在打印机支持时使用 TIFF 等适合打印的格式。
可以在切片之间留间距吗？
部分版本提供「间隙」选项，可在每个格子周围留出白边，模拟 Instagram 网格中显示的细缝。如果希望屏幕显示效果与原图一致，可调节间隙宽度以匹配社交平台的预览。