canvas高斯模糊算法

对于模糊图片这个效果的实现，其实css3中的filter属性也能够实现，但是这个属性的兼容性不是很好，所以我们通常不用这种方法实现，而使用canvas配合JS实现。

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. radius = Math.floor(radius) || 3;
18. sigma = sigma || radius / 3;
19. a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
20. b = -1 / (2 * sigma * sigma);
21. //生成高斯矩阵
22. for (i = 0, x = -radius; x <= radius; x++, i++) {
23. g = a * Math.exp(b * x * x);
24. gaussMatrix[i] = g;
25. gaussSum += g;
26. }
27. //归一化, 保证高斯矩阵的值在[0,1]之间
28. for (i = 0, len = gaussMatrix.length; i < len; i++) {
29. gaussMatrix[i] /= gaussSum;
30. }
31. //x方向
32. for (y = 0; y < height; y++) {
33. for (x = 0; x < width; x++) {
34. r = g = b = a = 0;
35. gaussSum = 0;
36. for (j = -radius; j <= radius; j++) {
37. k = x + j;  a=j+row;
38. if (k >= 0 && k < width) { //确保 k 没超出 x 的范围
39. i = (y * width + k) * 4;
40. r += data[i] * gaussMatrix[j + radius];
41. g += data[i + 1] * gaussMatrix[j + radius];
42. b += data[i + 2] * gaussMatrix[j + radius];
43. gaussSum += gaussMatrix[j + radius];
44. }
45. }
46. i = (y * width + x) * 4;
47. data[i] = r / gaussSum;
48. data[i + 1] = g / gaussSum;
49. data[i + 2] = b / gaussSum;
50. }
51. }
52. //y方向
53. for (x = 0; x < width; x++) {
54. for (y = 0; y < height; y++) {
55. r = g = b = a = 0;
56. gaussSum = 0;
57. for (j = -radius; j <= radius; j++) {
58. k = y + j;
59. if (k >= 0 && k < height) { //确保 k 没超出 y 的范围
60. i = (k * width + x) * 4;
61. r += data[i] * gaussMatrix[j + radius];
62. g += data[i + 1] * gaussMatrix[j + radius];
63. b += data[i + 2] * gaussMatrix[j + radius];
64. gaussSum += gaussMatrix[j + radius];
65. }
66. }
67. i = (y * width + x) * 4;
68. data[i] = r / gaussSum;
69. data[i + 1] = g / gaussSum;
70. data[i + 2] = b / gaussSum;
71. }
72. }
73. return data;
74. }