CSS filter与前端滤镜修改网站为(黑白)灰色代码

落日映苍穹つ 2023-07-23 10:00 31阅读 0赞

链接：https://zhuanlan.zhihu.com/p/125137964

2020.04.04 很多网站都换成了灰色调，如淘宝 百度 掘金 知乎等，通过实地考察，灰度的技术无一例外都使用了以下CSS，如淘宝的：

html {
        -webkit-filter: grayscale(100%);
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }

第一行对非IE浏览器生效，第二行是对IE浏览器生效（emmm...似乎浏览器就分为两种），本质上都是使用filter的grayscale属性，实现灰阶效果，灰阶是一种常用的图片滤镜。打开PS可以看到多种滤镜可选择：

![format_png][]

而通过CSS的filter能够实现其中的一些滤镜效果，如灰阶，高斯模糊等。

这个时候你可能会问，网页又不是图片，里面可能会有很多文本，为什么也能应用图片的滤镜呢？实际上网页在渲染到屏幕之前都会被栅格化成Canvas位图再画到屏幕上，所以filter处理的就是这张位图。

通过Chromium源码，我们可以看到相关滤镜的实现，实际上是使用了一个图像矩阵对原始位图进行转换，如下代码所示：

void GetGrayscaleMatrix(float amount, float matrix[20]) {
      // Note, these values are computed to ensure MatrixNeedsClamping is false
      // for amount in [0..1]
      matrix[0] = 0.2126f + 0.7874f * amount;
      matrix[1] = 0.7152f - 0.7152f * amount;
      matrix[2] = 1.f - (matrix[0] + matrix[1]);
      matrix[3] = matrix[4] = 0.f;
    
      matrix[5] = 0.2126f - 0.2126f * amount;
      matrix[6] = 0.7152f + 0.2848f * amount;
      matrix[7] = 1.f - (matrix[5] + matrix[6]);
      matrix[8] = matrix[9] = 0.f;
    
      matrix[10] = 0.2126f - 0.2126f * amount;
      matrix[11] = 0.7152f - 0.7152f * amount;
      matrix[12] = 1.f - (matrix[10] + matrix[11]);
      matrix[13] = matrix[14] = 0.f;
    
      matrix[15] = matrix[16] = matrix[17] = matrix[19] = 0.f;
      matrix[18] = 1.f;
    }

这个便为灰阶grayscale的矩阵获取方式，如果CSS传的amount值为1（上面参数的便为1 - amount = 0，代码传参的时候使用了和1的差值），那么将得到以下矩阵：

![format_png 1][]

这个矩阵便是用来对每个像素点进行转换，假设某个像素点的像素值为rgba（255, 119, 50, 0.5），那么这个像素点转换计算如下：

![format_png 2][]

（最后的w是一个额外的变换参数，默认值为1，在灰阶变换里面没有用到，所以矩阵的最后一行都为0）

实际上对RGB每一个的计算为：

R/G/B = 255 \* 0.2126 + 119 \* 0.7152 + 50 \* 0.0722 = 143

即使用公式：

![format_png 3][]

这个其实就是灰阶算法，所谓灰阶例如黑白电视便是像素点只用一个维度表示：浅或深，所以需要把RGB三维数据处理成一维的，最简单的便是取RGB的平均值即可，但更科学的应该是用人眼对三原色的感知程度分配系数，这样能提高对比度。

那么为什么上面需要用一个矩阵计算呢，实际上统一成一个矩阵有一个显而易见好处是做多重变换的时候，只需要对这个矩阵进行累乘得到一个最终的矩阵即可，类似于transform. 例如可以在灰阶之后再加上棕褐色（sepia）的处理：

html {
      filter: grayscale(1) sepia(0.5);
    }

如下图对比：

![format_png 4][]

棕褐色的矩阵获取方式为：

![format_png 5][]

如果灰阶的矩阵为A，棕褐色矩阵为B，那么此次的变换矩阵便为A \* B（注意矩阵一般不满足交换律，A \* B不等于B \*A），如果我们先做棕褐色处理再做灰阶的话，最后的效果就是灰阶的。

我们发现[Direct2D][]等引擎也是使用的这种方式进行变换，只不过采用的矩阵会有点差异：

![format_png 6][]

其它相对简单的滤镜如色调旋转（hue-rotate），反相（invert）等都是采用的这种矩阵变换，但是对于高斯模糊（blur）、投影（drop-shadow）等则是需要一些更复杂的算法，在源码里可以看到，高斯模糊是使用Skia的SkBlurImageFilter类做的处理，具体的计算过程可见[源码][Link 1]。不管是矩阵还是单独的处理，它们都是继承于PaintFilter.

最后，本篇主要简单介绍了下filter滤镜的一些原理，通过采用一个图像变换矩阵做的处理，不同的滤镜变换的公式不一样，所采用的矩阵也不一样，多种效果可以通过矩阵累积成一个新的矩阵。同时，对于模糊和投影单独有一些更加高级的处理。

[format_png]: /images/20230528/c9a2696e0e5e4e17be930bb729537a9b.png
[format_png 1]: /images/20230528/1a5e0771391949e2b88150c15c263781.png
[format_png 2]: /images/20230528/244da84ca7ca46cabffe982c5270f647.png
[format_png 3]: /images/20230528/dab6b1466c994356bf2da843585744e6.png
[format_png 4]: /images/20230528/eaa04359b22847059778b4caa743061b.png
[format_png 5]: /images/20230528/c7156c02d79d4006b7a6494b0429d713.png
[Direct2D]: https://link.zhihu.com/?target=https%3A//docs.microsoft.com/zh-cn/windows/win32/direct2d/grayscale-effect%23example-image
[format_png 6]: /images/20230528/d6729e0eda654f0eb76dc8e8a1ff76bc.png
[Link 1]: https://link.zhihu.com/?target=https%3A//github.com/servo/skia/blob/master/src/effects/SkBlurImageFilter.cpp