九宫格切图

朋友圈 9 宫格/自定义 NxN

415 次访问
9-GRID SLICER · WECHAT

朋友圈 9 宫格切图

图片自动切成 9 张(或 NxN)· 朋友圈 / 微博发图必备

拖入或点击选择图片

使用流程:上传 → 切割 → 全部下载 → 在朋友圈按顺序选择(从上到下、从左到右)→ 发布。

建议:原图最好是正方形(1:1),否则会从中心裁剪为方形。

关于本工具

了解工具定位 · 使用场景 · 对比优势

使用场景

📸

朋友圈九宫格

发朋友圈时一张图太单调,拼成九宫格又嫌麻烦。本工具一键将单张大图切成 3×3 的九宫格,每张切片保留原图细节,发朋友圈时按顺序上传即可形成完整大图效果,适合旅行风景、美食打卡、产品展示等场景,让朋友圈排版瞬间高级。

🎨

自定义 NxN 拼图

想发 4 张、6 张、12 张图片的整齐拼图?本工具支持自定义 N×N 切割(如 2×2、2×3、3×4),不局限于九宫格。适合商家展示产品系列、摄影师发布作品集、活动主办方发布多图回顾,自由控制每张切片的尺寸和排列,让多图发布不再杂乱。

🖼️

头像/封面切割

社交平台头像或封面图需要切割成多块拼成完整大图?本工具将一张大图切成多张小图,每张切片独立保存,适合做微信头像九宫格、抖音主页封面拼图、小红书笔记封面拼接。切割后每张图独立上传,别人点进主页才能看到完整效果,增加互动趣味。

🏢

商业海报拆图

线下海报或长图太大无法直接上传到社交媒体?本工具将海报按格切割成多张小图,方便在朋友圈、微博、小红书等平台分段发布。适合活动宣传、新品发布、招聘海报等场景,切割后每张图独立清晰,用户滑动浏览时能拼出完整海报,提升传播效果。

🎁

拼图游戏素材

制作拼图游戏或互动素材时,需要将一张完整图片切割成多块独立图片?本工具支持自定义行列数,生成等尺寸的切片,适合教育类小游戏、亲子互动、品牌营销裂变活动。每张切片可单独命名或编号,方便后续开发或手动拼图使用。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A(Picsart)传统方法(手机相册编辑)
数据隐私纯浏览器,零上传需注册并上传图片至服务器完全本地,无网络传输
处理速度1 秒内完成切图3-5 秒(含上传+处理)10-30 秒(手动裁剪+拼接)
离线可用完全离线(页面加载后)必须联网完全离线
自定义网格支持 2×2 至 9×9 任意 N×N仅支持 3×3(九宫格)需手动计算并逐张裁剪
输出格式PNG 单张压缩包PNG 单张下载(无打包)取决于设备保存格式
收费免费,无隐藏费用基础免费,去水印/高级功能需订阅免费(仅需时间成本)
注册要求无需注册需注册账号无需注册

使用指南

上手步骤 · 输入输出 · 避坑提示

输入输出示例8 个典型场景,覆盖常规、边界与易错

输入输出说明
上传一张 1080x1080 的正方形图片生成 9 张 360x360 的切片图片,按 3x3 网格排列典型场景:朋友圈 9 宫格发图
上传一张 1920x1080 的横向矩形图片生成 9 张 640x360 的切片图片,按 3x3 网格排列典型场景:横向图片自动裁成正方形再切
上传一张 1080x1920 的竖向矩形图片生成 9 张 360x640 的切片图片,按 3x3 网格排列典型场景:竖向图片自动裁成正方形再切
上传一张 100x100 的小图生成 9 张 33x33 的切片图片,按 3x3 网格排列边界 case:极小图片,切片后可能模糊
上传一张 5000x5000 的大图生成 9 张 1666x1666 的切片图片,按 3x3 网格排列边界 case:超大图片,浏览器处理可能变慢
上传一张 800x600 的图片,自定义网格设为 4x4生成 16 张 200x150 的切片图片,按 4x4 网格排列典型场景:自定义 NxN 网格(非 9 宫格)
上传一张 800x600 的图片,自定义网格设为 1x1生成 1 张 800x600 的切片图片,即原图本身边界 case:1x1 网格等于不切图
上传一张 800x600 的图片,自定义网格设为 5x3生成 15 张 160x200 的切片图片,按 5x3 网格排列易错 case:非正方形网格,行列数可不同

常见错误对照7 个常踩的坑 · 错误 → 修复

1. 上传了带透明通道的PNG,切图后出现黑边/白边

错误
直接上传一张带透明背景的 PNG 图片(如 logo、贴纸),切图后每张切片边缘出现黑块或白块。
修复
上传前将图片合并到纯色背景(白色/灰色),或使用 JPG 格式上传。

九宫格切图本质是等分裁剪,透明通道在拼接时与浏览器/系统默认背景色混合,产生视觉上的边框。合并背景可消除此问题。

2. 图片尺寸不是切割数的整数倍,导致边缘切片不完整

错误
上传一张 1080×1080 的图片,选择 4×4 切割(每格应为 270×270),但实际输出切片尺寸不一致。
修复
上传前将图片裁剪为 1080×1080(或 1200×1200 等 4 的倍数),或使用工具内置的“自动补边/裁剪”功能。

切图算法按像素等分,余数会分配到边缘切片,导致边缘切片尺寸与中间不同,破坏九宫格对齐效果。

3. 上传后未等图片处理完成就操作页面

错误
点击上传后立刻点击“下载全部”按钮,结果下载到空文件或只下载了部分切片。
修复
等待页面出现“处理完成”提示或切片预览图全部加载后再点击下载。

九宫格切图需在浏览器端完成图片解码、分割、编码为独立图片文件(Blob),大图或高分辨率图片需要几秒处理时间。异步操作未完成时下载会失败。

4. 选择“自定义 NxN”时输入了非数字字符或小数

错误
在切割数输入框中填写“3x3”、“2.5”、“三”或留空。
修复
填写整数,如“3”、“4”、“5”,且 N 值在工具允许范围内(通常 2-10)。

切割数必须是正整数,非数字或小数会导致 parseInt/Number 解析异常,工具可能无响应或输出错误切片数。

5. 在手机端长按保存单张切片时,误存了整张原图

错误
在手机浏览器中长按切片预览图,选择“保存图片”,实际保存的是原图。
修复
点击“下载全部”按钮打包下载所有切片,或使用桌面端右键“另存为”单独保存。

部分移动端浏览器对 canvas 生成的 Blob URL 长按行为不一致,可能回退到原始图片资源。建议使用工具提供的下载按钮。

6. 上传超大图片(5000×5000+)导致浏览器崩溃

错误
上传一张 8000×8000 像素的 4K 壁纸,浏览器标签页直接卡死或闪退。
修复
将图片缩小到 2000×2000 以内再上传,或使用图片压缩工具预处理。

九宫格切图完全在浏览器本地处理,大图解码和分割会占用大量内存(原图 4 倍以上),超出浏览器单个标签页的内存限制(通常 1-2GB)会导致崩溃。

7. 朋友圈发图时顺序错乱

错误
下载切片后直接按文件名顺序(如 1.jpg, 2.jpg...)发到朋友圈,结果九宫格拼图错位。
修复
按工具生成的预览顺序(通常从左到右、从上到下)依次上传,或使用工具提供的“按顺序编号”文件名。

朋友圈上传图片时会按选择顺序排列,而非文件名排序。如果手动打乱顺序上传,九宫格拼接效果会完全错乱。

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

W = ceil(W_original / N) × N, H = ceil(H_original / N) × N

变量说明

  • W_original — 原始图片宽度(像素)
  • H_original — 原始图片高度(像素)
  • N — 宫格行列数(如 3 表示 3×3)
  • W — 扩展后图片宽度(像素)
  • H — 扩展后图片高度(像素)

示例

原始图片 1080×800 像素,切 3×3 宫格(N=3)。W = ceil(1080/3)×3 = 360×3 = 1080,H = ceil(800/3)×3 = 267×3 = 801。图片被扩展为 1080×801 像素,再均分为 9 张 360×267 像素的小图。

适用范围

适用于任意 N×N 宫格(N≥2)。当原始图片尺寸不能被 N 整除时,工具自动在边缘补白/拉伸至整除尺寸。不适用于非正方形宫格(如 2×3)或单张原图直接输出(无切分需求)。

原理图

上传原始图片浏览器内切分(Canvas API 计算)生成九宫格选择 NxN 布局逐块裁剪与缩放(本地无上传)批量下载图片用户选择布局参数纯浏览器端处理得到切分图片
用户输入 本地处理 输出结果

开发者集成

3 种主流语言 · 复制即用

from PIL import Image
import os

# 将一张图片切割为 NxN 宫格(默认 3x3)
def split_grid(image_path, output_dir, grid=(3, 3)):
    img = Image.open(image_path)
    cols, rows = grid
    w, h = img.size
    cell_w, cell_h = w // cols, h // rows
    os.makedirs(output_dir, exist_ok=True)
    for row in range(rows):
        for col in range(cols):
            left = col * cell_w
            upper = row * cell_h
            right = (col + 1) * cell_w if col < cols - 1 else w
            lower = (row + 1) * cell_h if row < rows - 1 else h
            cell = img.crop((left, upper, right, lower))
            cell.save(f"{output_dir}/piece_{row}_{col}.png")

split_grid("input.jpg", "output/", (3, 3))
package main

import (
	"image"
	"image/jpeg"
	"image/png"
	"os"
	"path/filepath"
	"strconv"
)

func splitGrid(srcPath, dstDir string, cols, rows int) error {
	f, _ := os.Open(srcPath)
	defer f.Close()
	src, _, _ := image.Decode(f)
	bounds := src.Bounds()
	w, h := bounds.Dx(), bounds.Dy()
	cellW, cellH := w/cols, h/rows
	os.MkdirAll(dstDir, 0755)
	for r := 0; r < rows; r++ {
		for c := 0; c < cols; c++ {
			rect := image.Rect(c*cellW, r*cellH, (c+1)*cellW, (r+1)*cellH)
			piece := src.(interface {
				SubImage(r image.Rectangle) image.Image
			}).SubImage(rect)
			out, _ := os.Create(filepath.Join(dstDir, "piece_"+strconv.Itoa(r)+"_"+strconv.Itoa(c)+".png"))
			png.Encode(out, piece)
			out.Close()
		}
	}
	return nil
}

func main() {
	splitGrid("input.jpg", "output", 3, 3)
}
const sharp = require('sharp');
const path = require('path');
const fs = require('fs');

// 使用 sharp 切割图片为 NxN 宫格
async function splitGrid(inputPath, outputDir, cols = 3, rows = 3) {
  const meta = await sharp(inputPath).metadata();
  const w = meta.width, h = meta.height;
  const cellW = Math.floor(w / cols), cellH = Math.floor(h / rows);
  fs.mkdirSync(outputDir, { recursive: true });
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      const left = c * cellW, top = r * cellH;
      const extractWidth = (c === cols - 1) ? w - left : cellW;
      const extractHeight = (r === rows - 1) ? h - top : cellH;
      await sharp(inputPath)
        .extract({ left, top, width: extractWidth, height: extractHeight })
        .toFile(path.join(outputDir, `piece_${r}_${c}.png`));
    }
  }
}

splitGrid('input.jpg', 'output', 3, 3).catch(console.error);

常见问题

9 个高频疑问

九宫格切图怎么用?我上传图片后没反应。
操作分三步:1)点击上传按钮选择一张正方形图片(非正方形会自动裁剪为正方形);2)在「切割模式」下拉框中选择「3x3 九宫格」或自定义 NxN(比如 2x2 是四宫格、4x4 是十六宫格);3)点击「开始切割」按钮,几秒后下方会显示所有切片,每张切片单独提供下载按钮。如果点击后没反应,检查图片是否超过 20MB 或格式是否为 PNG/JPG/WebP——工具只支持这三种格式,且浏览器内存不足时大图会卡死,建议用 2000x2000 像素以内的图片。
为什么切出来的图片顺序是乱的,发朋友圈对不上?
切片默认按「从左到右、从上到下」编号,编号显示在每张切片左上角。发朋友圈时,按编号 1→9 依次上传即可。如果使用自定义 NxN 模式(比如 2x2),编号规则不变。注意:朋友圈发图时,上传顺序会影响最终排列——先传编号 1 的图片,再传编号 2,以此类推。部分手机系统(如 MIUI)会自动按拍摄时间排序,建议关闭相册的「智能排序」功能。
切出来的图片边缘有白边或黑边,怎么去掉?
白边/黑边通常是因为上传的图片不是精确正方形。工具会自动将非正方形图片「居中裁剪」为正方形后再切割,但如果原图长宽比差异过大(比如 16:9 横图),裁剪后边缘会留空白。解决方法:在上传前,用手机相册自带的编辑功能将图片裁成 1:1 正方形,再上传。工具不提供「填充拉伸」模式,因为拉伸会变形,影响朋友圈视觉效果。
这个工具和手机相册自带的九宫格切图有什么区别?
手机相册(如小米、华为)的九宫格一般只支持 3x3 固定模式,且切完只能直接发朋友圈,不能单独保存每张切片。本工具支持自定义 NxN(2x2 到 10x10),切完每张切片可单独下载到本地,方便发小红书、微博等支持多图但排序不固定的平台。另外,手机相册切图需要联网(依赖云端处理),本工具完全在浏览器本地运行,断网也能用。
切图后图片变模糊了,是工具压缩了画质吗?
没有压缩。切割时直接按原图像素裁剪,不重新编码,画质理论上与上传原图一致。如果觉得模糊,可能是两个原因:1)上传的图片本身分辨率低(比如 500x500 像素),切分成 9 张后每张只有 166x166 像素,在手机屏幕上放大显示自然会模糊;2)朋友圈或第三方平台上传时自动压缩了图片。建议上传至少 1200x1200 像素的图片,切完后每张约 400x400 像素,发朋友圈清晰度足够。
支持 GIF 动图吗?我想切动图发朋友圈。
不支持。工具只处理静态图片(PNG/JPG/WebP),GIF 动图上传后只会取第一帧作为静态图切割。如果确实需要切动图,建议先用其他工具(如 Photoshop 或在线 GIF 拆帧工具)将 GIF 拆成单帧图片,逐帧切完后再用 GIF 合成工具拼回去。不过朋友圈本身不支持动图播放,发出去也是静态,所以切动图的实际意义不大。
自定义 NxN 最大支持多少格?我想切 5x5 的拼图发小红书。
最大支持 10x10(即 100 格),最小 1x1(不切割)。5x5 完全支持,操作时在「切割模式」下拉框选「自定义」,输入行数 5、列数 5 即可。注意:格子数越多,每张切片越小。比如一张 2000x2000 的图片切 5x5,每张只有 400x400 像素,发小红书九宫格够用,但如果格子超过 8x8,切片可能低于 250x250 像素,在小红书笔记详情页放大后会模糊。建议 N 不超过 6。
切图后图片顺序乱了,能按原图位置重新排序吗?
工具本身不提供重新排序功能,但切片编号就是原始位置:编号 1 是左上角,按行递增。如果需要在本地重新排列,可以下载后按编号重命名文件(如 01.jpg、02.jpg),再按文件名顺序上传到朋友圈/小红书。如果用的是自定义 NxN 且行列数不对称(比如 2x5),编号规则不变——先从左到右填满第一行,再换行。
上传图片后一直转圈加载,是不是网站崩了?
不是网站崩了,是浏览器在处理大图。工具是纯前端运行,图片上传后需要浏览器分配内存进行裁剪运算。如果图片超过 10MB 或分辨率超过 4000x4000,低端手机(如 4GB RAM)可能卡死。解决方法:1)用图片压缩工具把图缩小到 2000x2000 像素以内再上传;2)换用电脑端 Chrome 浏览器,处理速度比手机快 3-5 倍;3)如果还是转圈,按 F12 打开控制台看是否有红色报错,有报错说明内存不足,需要重启浏览器重试。
选择 打开 +新窗口 esc关闭