canvas像素级操作实现各种滤镜之高斯模糊

相信用过PS的人很多都知道高斯模糊这个滤镜，详细的高斯模糊的原理可以猛击这个链接http://developer.51cto.com/art/201211/364930.htm。由于没有现成的canvas方面的算法实现，就得慢慢鼓捣那些基于java实现的代码。感觉这个http://blog.youkuaiyun.com/jia20003/article/details/7234741写的不错。

简单了解了原理后，发现要用到二维高斯函数,还得卷积什么的，更坑的是js里的二维数组（建立都麻烦）实在是不给力，建立高斯操作数倒是不成问题，但是最后在卷积时时不知道是怎么了调了很长时间没调出来，而且叠了四个for循环实在是让人不放心。后来觉得可以试一下分为x轴和y轴遍历才实现了功能，google之后发现有一个家伙跟我的思路差不多，但人家写的那叫一个明了关键代码如下。

1. <span style="white-space:pre">  </span>//高斯模糊  参数说明:width:canvas对象或者是数据体对象的宽，height:canvas或者是数据体对象的高，  
2.     //radius:模糊取值半径(默认为3)，sigma:方差取值(默认为1)  
3.     /** 
4.      * [Gaussian_blur description] 
5.      * @param {[type]} data   [description] 
6.      * @param {[type]} width  [description] 
7.      * @param {[type]} height [description] 
8.      * @param {[type]} radius [description] 
9.      * @param {[type]} sigma  [description] 
10.      */  
11.     function Gaussian_blur(data, width, height, radius, sigma) {  
12.         var gaussMatrix = [],  
13.             gaussSum = 0,  
14.             x, y,  
15.             r, g, b, a,  
16.             i, j, k, len;  
17.   
18.         radius = Math.floor(radius) || 3;  
19.         sigma = sigma || radius / 3;  
20.   
21.         a = 1 / (Math.sqrt(2 * Math.PI) * sigma);  
22.         b = -1 / (2 * sigma * sigma);  
23.         //生成高斯矩阵  
24.         for (i = 0, x = -radius; x <= radius; x++, i++) {  
25.             g = a * Math.exp(b * x * x);  
26.             gaussMatrix[i] = g;  
27.             gaussSum += g;  
28.   
29.         }  
30.   
31.         //归一化, 保证高斯矩阵的值在[0,1]之间  
32.         for (i = 0, len = gaussMatrix.length; i < len; i++) {  
33.             gaussMatrix[i] /= gaussSum;  
34.         }  
35.   
36.         //x方向  
37.         for (y = 0; y < height; y++) {  
38.             for (x = 0; x < width; x++) {  
39.                 r = g = b = a = 0;  
40.                 gaussSum = 0;  
41.                 for (j = -radius; j <= radius; j++) {  
42.                     k = x + j;  a=j+row;  
43.                     if (k >= 0 && k < width) { //确保 k 没超出 x 的范围  
44.   
45.                         i = (y * width + k) * 4;  
46.                         r += data[i] * gaussMatrix[j + radius];  
47.                         g += data[i + 1] * gaussMatrix[j + radius];  
48.                         b += data[i + 2] * gaussMatrix[j + radius];  
49.                         gaussSum += gaussMatrix[j + radius];  
50.                     }  
51.                 }  
52.                 i = (y * width + x) * 4;  
53.   
54.                 data[i] = r / gaussSum;  
55.                 data[i + 1] = g / gaussSum;  
56.                 data[i + 2] = b / gaussSum;  
57.             }  
58.         }  
59.         //y方向  
60.         for (x = 0; x < width; x++) {  
61.             for (y = 0; y < height; y++) {  
62.                 r = g = b = a = 0;  
63.                 gaussSum = 0;  
64.                 for (j = -radius; j <= radius; j++) {  
65.                     k = y + j;  
66.                     if (k >= 0 && k < height) { //确保 k 没超出 y 的范围  
67.                         i = (k * width + x) * 4;  
68.                         r += data[i] * gaussMatrix[j + radius];  
69.                         g += data[i + 1] * gaussMatrix[j + radius];  
70.                         b += data[i + 2] * gaussMatrix[j + radius];  
71.                         gaussSum += gaussMatrix[j + radius];  
72.                     }  
73.                 }  
74.                 i = (y * width + x) * 4;  
75.                 data[i] = r / gaussSum;  
76.                 data[i + 1] = g / gaussSum;  
77.                 data[i + 2] = b / gaussSum;  
78.   
79.             }  
80.         }  
81.   
82.         return data;  
83.     }