图片模糊

效果示例

如果打不开的话 P5.js 官网有个简单的示例：https://editor.p5js.org/p5/sketches/Image:_Blur

解析

原理非常简单，模糊后的像素的颜色由它旁边一些像素点的颜色决定。

我这里使用的是最简单的计算方法，一个点的值由其相邻的八个像素点的值决定：

	x-1	x	x+1
y-1	1/8	1/8	1/8
y	1/8	0	1/8
y+1	1/8	1/8	1/8

我们把某个像素点(x,y)附近的八个像素的值代入这个 3x3 表格中与乘积之和，得到的结果，就是模糊后应得的值。这个 3x3 表格也叫掩膜（Mask）。有一种类似原理的算法你们应该听过，叫做“高斯模糊”，只不过高斯模糊的掩膜的权重分配使用了高斯的正态分布函数。

《高斯模糊的原理是什么，怎样在界面中实现？》

此回答介绍了高斯模糊算法中的一些优化点：

• 可以使用两个一维高斯滤波替代二维滤波减少运算量
• 可以使用查表法优化