高斯模糊( Gaussian Blur)

• 高斯模糊（英语：Gaussian Blur），也叫高斯平滑，是在 Adobe Photoshop 、 GIMP 以及 Paint.NET 等 图像处理软件 中广泛使用的处理效果，通常用它来减少 图像噪声 以及降低细节层次。
• 

  上面的正态分布是一维的，图像都是 二维的，所以我们需要二维的 正态分布。
  正态分布的密度函数叫做"高斯函数"（Gaussian function）。它的一维形式是：

  一维形式
  其中，μ是x的均值，σ是x的方差。因为计算平均值的时候，
  有了这个函数 ，就可以计算每个点的权重了。
  %话不多说直接上代码%
• 中心点就是原

  进一步推导

  点，所以μ等于0。

  二维高斯函数

  根据一维高斯函数，可 以推导得到二维高斯函数：

%%%%话不多说直接上代码%%%%

• 《js代码实现封装》

  <div id="wrap" class="wrap">

        <img src="img.jpg" alt="" id="img" height="600" width="400"/>

        <canvas id="canvas"></canvas>

    </div>
 <script>

    (function(w){

    var GaussBlur = function(img,canvas,blur,sigma){

    var t = this,

    img = t.getid(img),

    can = t.getid(canvas),

    w = img.width,

                 h = img.height,

                 cxt = can.getContext("2d");

             can.width = w;

             can.height = h;

             cxt.drawImage(img, 0, 0,w, h);

             var canData = cxt.getImageData(0, 0,w, h),

tempData = t.gaussBlur(canData,blur,sigma);

      cxt.putImageData(tempData,0,0);

    }; 

    GaussBlur.prototype={

    getid:function(e){

    var ele,

    s = e.indexOf("#");

    if(s > 0){

    ele = document.querySelector(e)

    }else{

    ele = document.getElementById(e)

    };

    return ele;

    },

    gaussBlur:function(d,bl,s){

    var pixel =d.data,

    w = d.width,

    h = d.height,

    g_matrix = [],

    g_sum = 0,

    len,

    x, y,

    r, g, b, a,

    i, j, k;

    bl = Math.floor(bl) || 3;

    s = s || bl / 3;

    a = 1 / (Math.sqrt(2*Math.PI) * s);

    b = -1 / (2*s*s);

    //guss matrix

    for (i=0,x = -bl; x<= bl; x++,i++){

    g = a * Math.exp(b * x * x);

    g_matrix[i] = g;

    g_sum  += g;

    };

    //确保高斯值在 [1,0]之间

    for (i=0,len = g_matrix.length;i<len;i++){

    g_matrix[i] /= g_sum;

    };

    //x 方向一维高斯运算

    for (y = 0; y < h; y++) {

        for (x = 0; x < w; x++) {

            r = g = b = a = 0;

            g_sum = 0;

            for(j = -bl; j <= bl; j++){

                k = x + j;

                if(k >= 0 && k < w){//确保 k 没超出 x 的范围

                    //r,g,b,a 四个一组

                    i = (y * w + k) * 4;

                    r += pixel[i] * g_matrix[j + bl];

                    g += pixel[i + 1] * g_matrix[j + bl];

                    b += pixel[i + 2] * g_matrix[j + bl];

                    g_sum += g_matrix[j + bl];

                }

            }

            i = (y * w + x) * 4;

            // 除以 gaussSum 是为了消除处于边缘的像素, 高斯运算不足的问题

            pixel[i] = r / g_sum;

            pixel[i + 1] = g / g_sum;

            pixel[i + 2] = b / g_sum;

        }

    };

    //y 方向一维高斯运算

    for (x = 0; x < w; x++) {

        for (y = 0; y < h; y++) {

            r = g = b = a = 0;

            g_sum = 0;

            for(j = -bl; j <= bl; j++){

                k = y + j;

                if(k >= 0 && k < h){//确保 k 没超出 y 的范围

                    i = (k * w + x) * 4;

                    r += pixel[i] * g_matrix[j + bl];

                    g += pixel[i + 1] * g_matrix[j + bl];

                    b += pixel[i + 2] * g_matrix[j + bl];

                    // a += pixes[i + 3] * gaussMatrix[j];

                    g_sum += g_matrix[j + bl];

                }

            }

            i = (y * w + x) * 4;

            pixel[i] = r / g_sum;

            pixel[i + 1] = g / g_sum;

            pixel[i + 2] = b / g_sum;

        }

    };

    d.data = pixel;

    return d;

    }

    };

    w.gaussBlur=function(img,canvas,blur,sigam){

    new GaussBlur(img,canvas,blur,sigam);

    }

    })(window);

 

window.onload=function(){ 

gaussBlur("img","canvas",30,30)

}
</script>