前端图片处理 - 高斯模糊

前言 高斯模糊在图片处理中是比较常见的一种处理,其视觉效果就像是经过一个半透明屏幕在观察图像。这篇文章会基于webgl展示一种通用的实现,以及针对大图的优化。 基于二维正态分布的实现 高斯模糊使用正态分布来计算当前像素周围和自身的权重,并将这些权重和对应的rgb值相乘,加总再除以总权重。因为是取像素周围的点,当前点为中点(即 0,0的点),所以使用二维正态分布来计算权重。二维正态分布如下图所示: 其中x,y分别是目标像素与中心像素水平和垂直方向的差值,σ是正态分布的标准偏差,一般为模糊直径的1/3,模糊直径越大,则画面越模糊。那根据模糊直径计算当前像素的rgba值,在glsl中的实现如下图所示: // diameter »