JavaScript实现Sobel算子无法检测水平边缘问题排查

核心错误点 #

• 像素索引计算完全错误：
  你在计算3x3邻域像素的索引时，误用了w * y + 偏移量 + x的公式，正确的像素索引应该是(y + 行偏移) * w + (x + 列偏移)。比如上一行(x-1)位置的像素，正确索引是(y-1)*w + (x-1)，而你写的w*y + -1 + x -1实际指向的是当前行x-2的位置，这直接导致负责检测水平边缘的Gy滤波器没有正确计算垂直方向的像素梯度，自然无法识别水平边缘。

• 未处理边界越界问题：
  当处理图像边缘像素（x=0/x=w-1/y=0/y=h-1）时，访问x±1、y±1会超出图像数据范围，此时pixel.data对应的位置值为undefined，参与运算后会生成NaN，导致边界像素显示异常，同时影响边缘检测的完整性。

修正后的代码 #

function sobel() {
    let filter1 = [1, 0, -1, 2, 0, -2, 1, 0, -1]; // Gx：检测垂直边缘
    let filter2 = [1, 2, 1, 0, 0, 0, -1, -2, -1]; // Gy：检测水平边缘
    let w = canvas.width;
    let h = canvas.height;
    toGreyScale();
    let pixel = context.getImageData(0, 0, w, h);
    let filteredImg = context.createImageData(w, h);

    // 跳过边界像素，只处理内部区域
    for (let y = 1; y < h - 1; y++) {
        for (let x = 1; x < w - 1; x++) {
            let idx = 0;
            let Gx = 0;
            let Gy = 0;
            // 遍历3x3邻域
            for (let dy = -1; dy <= 1; dy++) {
                for (let dx = -1; dx <= 1; dx++) {
                    // 计算正确的邻域像素索引
                    let pixelIdx = ((y + dy) * w + (x + dx)) * 4;
                    Gx += filter1[idx] * pixel.data[pixelIdx];
                    Gy += filter2[idx] * pixel.data[pixelIdx];
                    idx++;
                }
            }
            let G = Math.sqrt(Gx * Gx + Gy * Gy);
            // 归一化到0-255范围，防止超出上限
            G = Math.min(G / 4, 255);
            let targetIdx = (y * w + x) * 4;
            filteredImg.data[targetIdx] = G;
            filteredImg.data[targetIdx + 1] = G;
            filteredImg.data[targetIdx + 2] = G;
            filteredImg.data[targetIdx + 3] = 255;
        }
    }
    context.putImageData(filteredImg, 0, 0, 0, 0, w, h);
}

修正说明 #

1. 修复像素索引计算：改用(y + dy)*w + (x + dx)来计算3x3邻域的像素位置，确保每个滤波器权重对应正确的邻域像素。
2. 边界处理：循环从y=1到y=h-2、x=1到x=w-2，直接跳过边缘像素，避免越界访问。
3. 添加数值上限限制：用Math.min(G/4, 255)确保像素值不会超过255，避免出现异常亮斑。

内容的提问来源于stack exchange，提问作者Enrico