[canvas入坑2]模糊效果

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

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

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

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

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

预处理的代码：

 1     var ppImgData = context.getImageData(0, 0, ppCanvasWidth, ppCanvasHeight);
 2     var ppData = ppImgData.data;
 3     var ppTemp = ppData;
 4     var radius = 0;
 5     var length = ppData.length;
 6     $(‘#range‘).attr("value", 0);
 7     for(var i = 0; i < ppCanvasHeight; i++)
 8     {
 9         for(var j = 0; j < ppCanvasWidth; j++)
10         {
11             var position = i * ppCanvasWidth + j;
12             var x = (position) * 4;
13             sumR[position] = ppData[x];
14             sumG[position] = ppData[x + 1];
15             sumB[position] = ppData[x + 2];
16             if(i != 0)
17             {
18                 sumR[position] += sumR[position - ppCanvasWidth];
19                 sumG[position] += sumG[position - ppCanvasWidth];
20                 sumB[position] += sumB[position - ppCanvasWidth];
21             }
22             if(j != 0)
23             {
24                 sumR[position] += sumR[position - 1];
25                 sumG[position] += sumG[position - 1];
26                 sumB[position] += sumB[position - 1];
27             }
28             if(i != 0 && j != 0)
29             {
30                 sumR[position] -= sumR[position - ppCanvasWidth - 1];
31                 sumG[position] -= sumG[position - ppCanvasWidth - 1];
32                 sumB[position] -= sumB[position - ppCanvasWidth - 1];
33             }
34         }
35     }

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

具体计算模糊的代码：

 1     function ppBlur()
 2     {
 3         var area = (radius + radius + 1) * (radius + radius + 1);
 4         for(var i = 0; i < ppCanvasHeight; i++)
 5         {
 6             for(var j = 0; j < ppCanvasWidth; j++)
 7             {
 8                 var position = i * ppCanvasWidth + j;
 9                 var x = (position) * 4;
10                 var tt = (i + radius) * ppCanvasWidth + j + radius;
11                 var tt2 = (i - radius - 1) * ppCanvasWidth + j + radius;
12                 var tt3 = (i + radius) * ppCanvasWidth + j - radius - 1;
13                 var tt4 = (i - radius - 1) * ppCanvasWidth + j - radius - 1;
14                 ppTemp[x] = (sumR[tt] - sumR[tt2] - sumR[tt3] + sumR[tt4]) / area;
15                 ppTemp[x + 1] = (sumG[tt] - sumG[tt2] - sumG[tt3] + sumG[tt4]) / area;
16                 ppTemp[x + 2] = (sumB[tt] - sumB[tt2] - sumB[tt3] + sumB[tt4]) / area;
17             }
18         }
19         ppData = ppTemp;
20         context.putImageData(ppImgData, 0, 0);
21     }

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

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