高斯模糊之canvas实现

依然是这位美女

接着来高斯模糊一下

模糊一下更具有朦胧美,还有小磨皮效果,痘痘马上无影踪,一键体验摘下近视镜的快感.好了,就扯这么多.下面来看看怎么实现高斯模糊.
高斯模糊的模糊感是参照每个像素点周边的像素来进行按权运算,而不是随便掺杂个五颜六色到像素里.正如刚说的,按权来取得周边的值,这里的按权是依据二维正态分布来分权的.得到权重值后我们就可以计算出当前像素点模糊后的r,g,b值了.

这里要注意的是:

1.模糊的半径就是指周边的像素点范围

2.进行模糊处理时要留意边界点的问题(可以用周边的点去代替不存在的点).

既然要用到二维正态分布(很多参数的公式)，计算周边点，以及权重计算，我们先封装前面几个函数。

二维正态分布

二维正态分布是一个二维的概率模型，这个是它的原公式。具体可查阅相关资料

GaussianDistribution(x, y, o1, o2, u1 = 0, u2 = 0, p = 0) {
   
  if (arguments.length < 4) {
   
    throw "参数长度至少4个！";
  } else {
   
    for (let i = 0; i < arguments.length; i++) {
   
      if (typeof arguments[i] !== "number") {
   
        throw "请确保参数类型为数字！";
      }
    }
  }
  return (
    (1 / (2 * Math.PI * o1 * o2 * Math.sqrt(1 - Math.pow(p, 2)))) *
    Math.exp(
      (-1 / (2 * (1 - Math.pow(p, 2)))) *
        (Math.pow(x - u1, 2) / Math.pow(o1, 2) -
          ((2 * p * (x - u1) * (y - u2))