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.   
  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.     }  

 

posted @ 2018-07-19 10:06  dnoyeb  阅读(817)  评论(0)  编辑  收藏  举报