Web UI: Blur Background

20th August 2020 at 2:19pm
Web UI

机核网 的电台播放器实现了一个好看的模糊背景效果,该背景的颜色会根据节目封面而变化。比如下面这期节目,封面是红色的,则背景也是红色:

研究了一下,发现它将原封面图,用阿里云 OSS 的能力模糊了之后作为背景图:

其中各参数的解释是:

resize (document)limit_1如果指定的尺寸(本例中 220x220)大于原图,则不处理
m_fixed固定宽高,强制缩略
w_220, h_220宽和高均为 220px
quality (document)q_90变换为原图质量的 90%
bright (document)-20调低亮度
blur(document)r_50, s_50模糊半径及正态分布的标准差,为相对单位,取值 [1, 50]

是个值得参考的实现。