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

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

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

	//高斯模糊  参数说明:width:canvas对象或者是数据体对象的宽，height:canvas或者是数据体对象的高，
	//radius:模糊取值半径(默认为3)，sigma:方差取值(默认为1)
	/**
	 * [Gaussian_blur description]
	 * @param {[type]} data   [description]
	 * @param {[type]} width  [description]
	 * @param {[type]} height [description]
	 * @param {[type]} radius [description]
	 * @param {[type]} sigma  [description]
	 */
	function Gaussian_blur(data, width, height, radius, sigma) {
		var gaussMatrix = [],
			gaussSum = 0,
			x, y,
			r, g, b, a,
			i, j, k, len;

		radius = Math.floor(radius) || 3;
		sigma = sigma || radius / 3;

		a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
		b = -1 / (2 * sigma * sigma);
		//生成高斯矩阵
		for (i = 0, x = -radius; x <= radius; x++, i++) {
			g = a * Math.exp(b * x * x);
			gaussMatrix[i] = g;
			gaussSum += g;

		}

		//归一化, 保证高斯矩阵的值在[0,1]之间
		for (i = 0, len = gaussMatrix.length; i < len; i++) {
			gaussMatrix[i] /= gaussSum;
		}

		//x方向
		for (y = 0; y < height; y++) {
			for (x = 0; x < width; x++) {
				r = g = b = a = 0;
				gaussSum = 0;
				for (j = -radius; j <= radius; j++) {
					k = x + j;	a=j+row;
					if (k >= 0 && k < width) { //确保 k 没超出 x 的范围

						i = (y * width + k) * 4;
						r += data[i] * gaussMatrix[j + radius];
						g += data[i + 1] * gaussMatrix[j + radius];
						b += data[i + 2] * gaussMatrix[j + radius];
						gaussSum += gaussMatrix[j + radius];
					}
				}
				i = (y * width + x) * 4;

				data[i] = r / gaussSum;
				data[i + 1] = g / gaussSum;
				data[i + 2] = b / gaussSum;
			}
		}
		//y方向
		for (x = 0; x < width; x++) {
			for (y = 0; y < height; y++) {
				r = g = b = a = 0;
				gaussSum = 0;
				for (j = -radius; j <= radius; j++) {
					k = y + j;
					if (k >= 0 && k < height) { //确保 k 没超出 y 的范围
						i = (k * width + x) * 4;
						r += data[i] * gaussMatrix[j + radius];
						g += data[i + 1] * gaussMatrix[j + radius];
						b += data[i + 2] * gaussMatrix[j + radius];
						gaussSum += gaussMatrix[j + radius];
					}
				}
				i = (y * width + x) * 4;
				data[i] = r / gaussSum;
				data[i + 1] = g / gaussSum;
				data[i + 2] = b / gaussSum;

			}
		}

		return data;
	}