[canvas入坑2]模糊效果

查看效果请到 http://philippica.github.io/  点击blur

模糊效果比较好的应该是高斯模糊,一个点的值变成了以该点为圆心的一个圆内所有像素的加权平均,权重由二维正态分布计算出

以前用qt实现过一个高斯模糊,但是js的速度毕竟不能和c++比,为了实现一个比较好的效果,这里在效率和效果方面做了个折中，每一点的值等于以这个点为中心的正方形内所有像素值的平均

这样的优点是计算速度快,矩阵天然的存着正方形,所以通过一个O(canvasWidth * canvasHeight)的预处理,接下来即可迅速地得到每个像素的值

具体方法应该是acm里用烂的方法,sum[i][j]存着以(i,j)为右下角的到左上角画布中所有该通道值的和,于是画布中任意矩形的和都可以用一个类似容斥的方法O(1)得到

预处理的代码：

    var ppImgData = context.getImageData(0, 0, ppCanvasWidth, ppCanvasHeight);
    var ppData = ppImgData.data;
    var ppTemp = ppData;
    var radius = 0;
    var length = ppData.length; 
    $('#range').attr("value", 0);
    for(var i = 0; i < ppCanvasHeight; i++)
    {
        for(var j = 0; j < ppCanvasWidth; j++)
        {
            var position = i * ppCanvasWidth + j;
            var x = (position) * 4;
            sumR[position] = ppData[x];
            sumG[position] = ppData[x + 1];
            sumB[position] = ppData[x + 2];
            if(i != 0)
            {
                sumR[position] += sumR[position - ppCanvasWidth];
                sumG[position] += sumG[position - ppCanvasWidth];
                sumB[position] += sumB[position - ppCanvasWidth];
            }
            if(j != 0)
            {
                sumR[position] += sumR[position - 1];
                sumG[position] += sumG[position - 1];
                sumB[position] += sumB[position - 1];
            }
            if(i != 0 && j != 0)
            {
                sumR[position] -= sumR[position - ppCanvasWidth - 1];
                sumG[position] -= sumG[position - ppCanvasWidth - 1];
                sumB[position] -= sumB[position - ppCanvasWidth - 1];
            }
        }
    }

sumR sumG sumB分别存着三个通道内的预处理的值，radius表示模糊半径

具体计算模糊的代码：

    function ppBlur()
    {
        var area = (radius + radius + 1) * (radius + radius + 1);
        for(var i = 0; i < ppCanvasHeight; i++)
        {
            for(var j = 0; j < ppCanvasWidth; j++)
            {
                var position = i * ppCanvasWidth + j;
                var x = (position) * 4;
                var tt = (i + radius) * ppCanvasWidth + j + radius;
                var tt2 = (i - radius - 1) * ppCanvasWidth + j + radius;
                var tt3 = (i + radius) * ppCanvasWidth + j - radius - 1;
                var tt4 = (i - radius - 1) * ppCanvasWidth + j - radius - 1;
                ppTemp[x] = (sumR[tt] - sumR[tt2] - sumR[tt3] + sumR[tt4]) / area;
                ppTemp[x + 1] = (sumG[tt] - sumG[tt2] - sumG[tt3] + sumG[tt4]) / area;
                ppTemp[x + 2] = (sumB[tt] - sumB[tt2] - sumB[tt3] + sumB[tt4]) / area;            
            }
        }
        ppData = ppTemp;
        context.putImageData(ppImgData, 0, 0);
    }

sumR[tt] - sumR[tt2] - sumR[tt3] + sumR[tt4]就是容斥出该正方形内R通道的和,再除以该区域内像素的总数即是平均值

总结：边界处理不好，在图片的边缘会明显变暗，主要是在边界处area的发生了变化