您好,登录后才能下订单哦!
本篇内容介绍了“CSS filter与前端滤镜实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
很多网站都换成了灰色调,如淘宝百度掘金知乎等,通过实地考察,灰度的技术无一例外都使用了以下CSS,如淘宝的:
html {
-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
第一行对非IE浏览器生效,第二行是对IE浏览器生效(emmm...似乎浏览器就分为两种),本质上都是使用filter的grayscale属性,实现灰阶效果,灰阶是一种常用的图片滤镜。打开PS可以看到多种滤镜可选择:
而通过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的差值),那么将得到以下矩阵:
这个矩阵便是用来对每个像素点进行转换,假设某个像素点的像素值为rgba(255, 119, 50, 0.5),那么这个像素点转换计算如下:
(最后的w是一个额外的变换参数,默认值为1,在灰阶变换里面没有用到,所以矩阵的最后一行都为0)
实际上对RGB每一个的计算为:
R/G/B = 255 * 0.2126 + 119 * 0.7152 + 50 * 0.0722 = 143
即使用公式:
这个其实就是灰阶算法,所谓灰阶例如黑白电视便是像素点只用一个维度表示:浅或深,所以需要把RGB三维数据处理成一维的,最简单的便是取RGB的平均值即可,但更科学的应该是用人眼对三原色的感知程度分配系数,这样能提高对比度。
那么为什么上面需要用一个矩阵计算呢,实际上统一成一个矩阵有一个显而易见好处是做多重变换的时候,只需要对这个矩阵进行累乘得到一个最终的矩阵即可,类似于transform. 例如可以在灰阶之后再加上棕褐色(sepia)的处理:
html {
filter: grayscale(1) sepia(0.5);
}
棕褐色的矩阵获取方式为:
如果灰阶的矩阵为A,棕褐色矩阵为B,那么此次的变换矩阵便为A * B(注意矩阵一般不满足交换律,A * B不等于B *A),如果我们先做棕褐色处理再做灰阶的话,最后的效果就是灰阶的。
我们发现Direct2D等引擎也是使用的这种方式进行变换,只不过采用的矩阵会有点差异:
其它相对简单的滤镜如色调旋转(hue-rotate),反相(invert)等都是采用的这种矩阵变换,但是对于高斯模糊(blur)、投影(drop-shadow)等则是需要一些更复杂的算法,在源码里可以看到,高斯模糊是使用Skia的SkBlurImageFilter类做的处理。不管是矩阵还是单独的处理,它们都是继承于PaintFilter.
“CSS filter与前端滤镜实例分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。