像素化与 CSS 滤镜
如果只是按照某些特定规则改变一个图像上的所有像素，浏览器提供了更简便的方法：CSS滤镜。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS滤镜</title> </head> <body> <img src="https://images.unsplash.com/photo-1666552982368-dd0e2bb96993?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"> <img src="https://images.unsplash.com/photo-1666552982368-dd0e2bb96993?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" style="filter:grayscale(100%)" > <img src="https://images.unsplash.com/photo-1666552982368-dd0e2bb96993?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" style="filter:blur(1.5px) grayscale(0.5) saturate(1.2) contrast(1.1) brightness(1.2)" > </body> </html>
相比起来CSS 滤镜和 Canvas 滤镜都很好用，但只能实现比较固定的视觉效果。而用像素处理图片更灵活，因为它可以实现滤镜功能，还可以实现更加丰富的效果，包括一些非常炫酷的视觉效果。
拓展：高斯模糊的算法
下面这些来自阮一峰的网络日志：高斯模糊的算法
通常，图像处理软件会提供"模糊"（blur）滤镜，使图片产生模糊的效果。
模糊的算法有很多种，其中有一种叫做高斯模糊（Gaussian Blur）。它将正态分布（又名高斯分布）用于图像处理。
本质上，它是一种数据平滑技术（data smoothing），适用于多个场合，图像处理恰好提供了一个直观的应用实例。
一、高斯模糊的原理
所谓模糊，可以理解成每一个像素都取周边像素的平均值。在图形上，就相当于产生"模糊"效果，"中间点"失去细节。计算平均值时，取值范围越大，"模糊效果"越强烈。
每个点都要取周边像素的平均值，那么应该如何分配权重呢？
二、正态分布的权重
正态分布显然是一种可取的权重分配模式。
在图形上，正态分布是一种钟形曲线，越接近中心，取值越大，越远离中心，取值越小。
计算平均值的时候，我们只需要将"中心点"作为原点，其他点按照其在正态曲线上的位置，分配权重，就可以得到一个加权平均值。
三、高斯函数
上面的正态分布是一维的，图像都是二维的，所以我们需要二维的正态分布。
正态分布的密度函数叫做高斯函数（Gaussian function）。它的一维形式是：
其中，μ是x的均值，σ是x的方差。因为计算平均值的时候，中心点就是原点，所以μ等于0。
根据一维高斯函数，可以推导得到二维高斯函数：
有了这个函数 ，就可以计算每个点的权重了。
四、权重矩阵
假定中心点的坐标是（0,0），那么距离它最近的8个点的坐标如下：
为了计算权重矩阵，需要设定σ的值。假定σ=1.5，则模糊半径为1的权重矩阵如下：
这9个点的权重总和等于0.4787147，如果只计算这9个点的加权平均，还必须让它们的权重之和等于1，因此上面9个值还要分别除以0.4787147，得到最终的权重矩阵。
五、计算高斯模糊
有了权重矩阵，就可以计算高斯模糊的值了。
假设现有9个像素点，灰度值（0-255）如下：
每个点乘以自己的权重值：
得到
将这9个值加起来，就是中心点的高斯模糊的值。
对所有点重复这个过程，就得到了高斯模糊后的图像。如果原图是彩色图片，可以对RGB三个通道分别做高斯模糊。
六、边界点的处理
如果一个点处于边界，周边没有足够的点，怎么办？
一个变通方法，就是把已有的点拷贝到另一面的对应位置，模拟出完整的矩阵。
