双边滤波算法

Question

我正在尝试用 JavaScript 实现一个简单的双边过滤器。这就是我到目前为止所想到的：

// For each pixel
for (var y = kernelSize; y < height-kernelSize; y++) {
    for (var x = kernelSize; x < width-kernelSize; x++) {
        var pixel = (y*width + x)*4;
        var sumWeight = 0;
        outputData[pixel] = 0;
        outputData[pixel+1] = 0;
        outputData[pixel+2] = 0;
        outputData[pixel+3] = inputData[pixel+3];

        // For each neighbouring pixel
        for(var i=-kernelSize; i<=kernelSize; i++) {
            for(var j=-kernelSize; j<=kernelSize; j++) {
                var kernel = ((y+i)*width+x+j)*4;
                var dist = Math.sqrt(i*i+j*j);
                var colourDist = Math.sqrt((inputData[kernel]-inputData[pixel])*(inputData[kernel]-inputData[pixel])+
                        (inputData[kernel+1]-inputData[pixel+1])*(inputData[kernel+1]-inputData[pixel+1])+
                        (inputData[kernel+2]-inputData[pixel+2])*(inputData[kernel+2]-inputData[pixel+2]));
                var curWeight = 1/(Math.exp(dist*dist/72)*Math.exp(colourDist*colourDist*8));
                sumWeight += curWeight;
                outputData[pixel] += curWeight*inputData[pixel];
                outputData[pixel+1] += curWeight*inputData[pixel+1];
                outputData[pixel+2] += curWeight*inputData[pixel+2];
            }
        }

        outputData[pixel] /= sumWeight;
        outputData[pixel+1] /= sumWeight;
        outputData[pixel+2] /= sumWeight;
    }
}

inputData 来自 html5 canvas 对象，并且采用 rgba 的形式。 我的图像要么没有任何变化，要么边缘有黑色斑点，具体取决于我如何更改这个公式：

var curWeight = 1/(Math.exp(dist*dist/72)*Math.exp(colourDist*colourDist*8));

不幸的是，我对 html/javascript 和图像视觉算法仍然很陌生，我的搜索没有找到答案。我的猜测是 curWeight 的计算方式有问题。我在这里做错了什么？我应该先将输入图像转换为 CIElab/hsv 吗？

Answer 1

我不是 JavaScript 专家：RGB 值是 0..255 吗？如果是这样，Math.exp(colourDist*colourDist*8) 将产生非常大的值 - 您可能希望将 colorDist 缩放到范围 [0..1]。

顺便说一句：如果您之后只需要平方距离，为什么还要计算 dist 和 colourDist 的 sqrt 呢？

Answer 2

首先，您的图像边缘会变成黑色/奇怪，因为您没有过滤边缘。简短地看一下你的代码会发现你从 (kernelSize,kernelSize) 开始并以 (width-kernelSize,height-kernelSize) 结束 - 这意味着你只过滤图像内一个较小的矩形，其中你有 kernelSize 的边距每一面都是未经过滤的。在不知道你的 javscript/html5 的情况下，我会假设你的 outputData 数组是用零（这意味着黑色）初始化的，然后不接触它们会让它们变成黑色。请参阅我的链接对您的帖子的评论，以获取处理边缘的代码。

除此之外，按照@nikie的答案 - 您可能想确保颜色距离限制在 [0,1] 范围内 - 您可以通过添加行 colourDist = colorDist / (MAX_COMP * Math, sqrt(3)) （直接在第一行之后进行计算）。其中 MAX_COMP 是图像中颜色分量可以具有的最大值（通常为 255）

Answer 3

我发现了代码中的错误。问题是我将每个像素添加到自身而不是其周围的邻居。我将在这里留下更正后的代码，以防有人需要双边过滤算法。

outputData[pixel] += curWeight*inputData[kernel];
outputData[pixel+1] += curWeight*inputData[kernel+1];
outputData[pixel+2] += curWeight*inputData[kernel+2];