机核网 的电台播放器实现了一个好看的模糊背景效果,该背景的颜色会根据节目封面而变化。比如下面这期节目,封面是红色的,则背景也是红色:
研究了一下,发现它将原封面图,用阿里云 OSS 的能力模糊了之后作为背景图:
- 原图:https://image.gcores.com/855c57b6-b031-423c-b5aa-b6f3aa1d5afc.jpg
- 背景图:https://image.gcores.com/855c57b6-b031-423c-b5aa-b6f3aa1d5afc.jpg?x-oss-process=image/resize,limit_1,m_fixed,w_220,h_220/quality,q_90/bright,-20/blur,r_50,s_50/format,jpg
其中各参数的解释是:
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] |
是个值得参考的实现。