双边过滤算法

我正在尝试在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吗？

解决方法:

首先,由于您不过滤边缘,因此图像的边缘变成黑色/怪异的.简短地看一下代码,您会发现您从(kernelSize,kernelSize)开始,并以(width-kernelSize,height-kernelSize)结尾-这意味着您仅在图像内过滤了一个较小的矩形,在该矩形上您可以看到kernelSize的余量每一面都是未经过滤的.不知道您的javscript / html5,我假设您的outputData数组初始化为零(表示黑色),然后不触摸它们会使它们保持黑色.请参阅我的评论链接到您的文章,以获得可以处理边缘的代码.

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

标签：graphics,computer-vision,javascript
来源： https://codeday.me/bug/20191207/2087429.html