学堂 学堂 学堂公众号手机端

css和图片主题色

lewis 1年前 (2024-03-24) 阅读数 5 #技术


这个想法是来源于「性能优化」中的骨架屏:
在图片居多的站点中,这将是非常nice的体验 —— 图片加载通常是比较让人难受的,好的骨架中一般占位图就是低像素的图片,即大体配色和变化是和实际内容一致的。
有时候比如图片不固定的,那可以使用算法获取图片的主体颜色(至少得是同色系的吧),使用纯色块占位。

再进一步想到,在一些“轻松”的场景下,我们可以让背景色/页面主题色跟随轮播图改变。至于效果嘛…你们可以想一下网易云音乐滑动切歌时的背景效果。


因为是不固定图片,所以我想到了四种方法:

tensorflow.js 图像色彩分析canvas对图片主基调进行分析,取大概值css高斯模糊上传图片时后端对图片分析处理,返回时直接返回一张低像素图片

第一种方式目前还在我的实践中,以后会单独出一篇文章;最后一种方式个人不太建议首选:首先后端处理也需要时间,另一方面毕竟也是以图片进行传输的…yee~(而且后端可能也不太建议你首选

版权声明

本文仅代表作者观点,不代表博信信息网立场。

热门