[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的发生了变化