跳转到主要内容
返回博客

技术实践

图片分割线自动检测:把 AI 生成的九宫格大图精准切成 9 张

为什么九宫格不能直接三等分?从逐像素扫描、偏离均值的色差判据到原分辨率裁切,介绍自动检测分割线的实现思路。

CVY.AI
约 4 分钟阅读
更新于
均分切割与沿真实分割线裁切的对比
文章目录

最近做一批"九宫格"配图,流程是先让模型生成一张3×3的大图,再切成9张单图发出去。切图这步我一开始想当然——宽高各三等分不就完了?结果切出来全是歪的:AI排版时,格子根本不是精确等分,等分线直接切进了文字和图里。

于是研究了一下"怎么自动找到图里的分割线、沿线切",这篇把思路和实现记一下,最后附上生成规整九宫格的提示词。

一、为什么"均分"不行

拿到一张拼好的3×3大图,最直觉的切法是宽高各三等分。但AI(或任何排版)生成的九宫格,内容多的格子会被撑大、内容少的会被压小,9个格子并不是精确的1/3。你按1/3、2/3硬切,切割线就落在了文字或图片中间。
均分切割线落在内容上(切歪)vs沿真实分割线切(对)的对比

所以正确的做法是:先找到图里真正的分割线在哪,再沿着线切。

二、自动识别分割线的实现思路(含代码)

核心判据一句话:分割线是一条"从头到尾同一个颜色"的贯穿线;而穿过内容的行或列,一定会在某处变色。

按这个判据扫描每一行、每一列,保留"整条同色"的就是分割线。听着简单,但有两个实现细节直接决定它在真实图片上好不好使。

细节1:必须逐像素密扫,不能跳采样。
分割线可能只有几像素宽。为了快而隔十几像素采一个点,就可能正好跳过某条垂直分割线,导致"一条横穿了垂直线的内容带"被误判成同色。密扫才能保证一定踩到交叉的分割线。

细节2:抗噪不能用"极差(max-min)“,要用"偏离均值”。
最容易想到的是判断整条的max-min是否够小。但细分割线常带抗锯齿,会吸收两侧内容的颜色、沿线缓慢漂移(左边偏暖、右边偏冷),极差可能到二三十,把真的分割线误杀。

更稳的判据是看每个像素偏离整条均值有多远:

下面是判断逻辑的伪代码;avg、channelDist 和 TOL 分别表示平均色、通道色差函数和容差。

function lineIsUniform(pixels) {
  const mean = avg(pixels);                 // 整条的平均色
  // 渐变漂移:每个点都离均值不远 → 判为同色(是分割线)
  // 横穿分割线:某处一个大突跳,离均值很远 → 判为不同色(不是分割线)
  return pixels.every(p => channelDist(p, mean) <= TOL); // TOL ≈ 45
}

为什么它更好?对线性渐变,偏离均值约等于极差的一半(渐变被容忍);对局部突跳(横穿分割线),偏离均值约等于突跳本身(照样抓)。同一个阈值,对渐变宽容、对突跳严格——这正是要的效果,而max-min把两者混为一谈,才会误杀。

识别到分割线后,沿线切、并把线本身裁掉,就得到干净的9张。这样一来,黑、白、彩色任何颜色的分割线都能识别,只要它整条是同一个颜色。

补一个性能点:识别只在缩略图上跑(定位分割线的相对位置就够),真正裁切时用原图按原分辨率裁——所以切出来的图不会变模糊。

三、顺带:让模型一次拼出规整的3×3

前面都在说"切",其实"生成"那一步的关键是把排版约束写进提示词,而不是让模型自由发挥。以一个教程图为例:

根据以下的标题和内容,请给我生成9张宽高比一样的图片,拼成3×3(分割线使用纯黑色):
图1是标题:番茄炒鸡蛋的保姆级教程
图2-图9是番茄炒鸡蛋的分步教程,每一步写清楚关键点(配料、烹饪时长、火候等)

AI一次生成的3×3九宫格教程大图

几个要点:明确"9张宽高比一样"“3×3”,模型才会规整排布;指定"分割线纯色",正好给上面的自动识别埋伏笔;每格写清关键点,信息才落得下去。

四、不想自己写,直接用现成的

上面这套(逐像素、偏离均值、任意颜色、原图分辨率裁切)逻辑,CVY.AI的图片分割工具里实现了,纯浏览器本地跑、图片不上传。把大图拖进去上传即自动识别分割线、沿线切成9张带编号的小图,打包下载;规整无分割线的图,切到"手动N×M"按行列等分即可。生成大图那步用CVY.AI的图片生成器配上面的提示词。
工具上传后自动识别分割线,9格带编号沿线切的效果

小结

把AI生成的九宫格大图切成9张,坑在"切":格子不等分,均分会切歪。解法是自动识别分割线——整条同色+逐像素密扫+偏离均值抗噪,任意颜色的分割线都能认,再沿线切、裁掉线。思路不复杂,但密扫和抗噪这两个细节,决定了它在真实图片上到底能不能用。

相关教程与原文

九宫格制作与切图教程 · CSDN 原文

  • 图片分割
  • JavaScript
  • 图像处理

把下一个想法变成图片。

打开生成器,输入自己的提示词,或从一个示例开始尝试。

打开图片生成器