① 输入图像点击 / 拖动
Sobel 边缘检测 · 逐像素可视化
上传任意本地图片，点击图中的一个位置，或按住准星拖动选点，直接查看它的 3×3 灰度邻域如何与 Sobel 核逐项相乘，得到 Gx、Gy、梯度幅值与最终边缘判断。
② 灰度图I(x,y)
③ 梯度幅值M = √(Gx²+Gy²)
④ 阈值边缘M ≥ T
边缘阈值 T（Sobel 理论最大幅值约 1442.5）220
选中像素
坐标 —
中心 RGB —
中心灰度 —
两幅局部图位置完全对应：左侧保留 RGB，右侧显示灰度化结果；红框是参与本次运算的 3×3 邻域。
中心 RGB —
中心灰度 —
两幅局部图位置完全对应：左侧保留 RGB，右侧显示灰度化结果；红框是参与本次运算的 3×3 邻域。
真实 3×3 灰度邻域 P
当前运算核
梯度方向
箭头表示灰度增长最快的方向（梯度方向）；几何意义上的边缘方向通常与它近似垂直。
逐项计算
切换步骤，先看彩色像素如何变成灰度，再看同一个位置的 3×3 灰度邻域如何变成边缘强度。
Gx—
Gy—
|G|—
θ—
判断—
整幅图片的计算流程
RGB 图像 → Gray = round(0.299R + 0.587G + 0.114B) → 3×3 窗口逐像素滑动 → Gx / Gy → M = √(Gx²+Gy²) → 与阈值 T 比较 → 二值边缘图
灰度化对每个像素独立执行，然后才进入 Sobel。这里使用的是经典 3×3 Sobel：Gx = [[-1,0,1],[-2,0,2],[-1,0,1]]；Gy = [[-1,-2,-1],[0,0,0],[1,2,1]]。图像最外侧一圈像素没有完整 3×3 邻域，因此本演示将其梯度设为 0。