通过前端工程化让网站变灰

原创
2022/12/20 21:36
阅读数 162

小伙伴们晚上好,欢迎来到前端小妙招。相信大家都知道使用滤镜让网页变灰,但是你一定好奇为什么要通过工程化使用,下面就让我给大家讲一讲。

首先我们先搭建一个工程化项目,在工程化中含有PostCSS滤镜自动补全的插件。我们写一个网页变灰看看打包后效果。这是高版本浏览器的、这是兼容中版本火狐的、这是兼容低版本IE的。IE6中是灰色的,IE11中是彩色的。这样我们就能在尽可能多的浏览器中滤镜让网页变灰了。在业务层只需使用基本写法,不同浏览器的写法应当由架构层完成。如果让业务层来写完整代码,容易写出问题代码。

html {
	filter: grayscale(100%);
}
html {
	filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
	-webkit-filter: grayscale(100%);
	        filter: grayscale(100%);
}
html {
	filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
	filter: grayscale(100%);
	filter: gray;
}

比如我们随便开一个网站,注意看这个网站的变灰代码。有带webkit的写法和无前缀写法,应当将无前缀写法放后。还有moz\ms\o这些写法,是根本不存在的。我们再看这个svg滤镜,里面简单把红绿蓝取平均值得到灰度,和其他灰度的算法不同,一般的灰度滤镜都是用BT.709的这个公式算的,直接红绿蓝取平均值是HSI的亮度,观感不是很好。最后再看这个IE滤镜,这个IE滤镜是IE低版本用,后来IE11删了,但是B站根本不支持IE11一下,所以这行也没有用。

html {
	/* 没问题 */
	-webkit-filter:grayscale(100%);
	/* 不存在-moz-filter */
	-moz-filter:grayscale(100%);
	/* 不存在-ms-filter */
	-ms-filter:grayscale(100%);
	/* 不存在-o-filter */
	-o-filter:grayscale(100%);
	/* 算法不对 */
	filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	/* 没问题 */
	filter:grayscale(100%);
	/* 你的网站根本不支持IE10以下,这句话拿来卵用都没有 */
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
}

上面说的是滤镜用法,如果你对变灰有更高的要求,比如更好的浏览器兼容性、更好的性能、更自然的灰度算法、界面变灰内容不变灰,我们可以通过工程化处理CSS和界面图片。我们先写个PostCSS插件,处理CSS的颜色。

图片处理最后我选了jimp这个库,主要是因为可以自定义插件来使用特定算法。我们看看打包后效果。

原图

我们根据BT.709算出亮度

我们根据gamma值为2.2的伽马校正算出亮度 来源:知乎

 

我们根据Lab算出亮度

个人觉的Lab效果最佳。

好了,本期视频就到这啦,喜欢的小伙伴可以点击订阅收藏和关注,我们下次见了,拜拜。 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部