源码可见:[
直接点击
]
1.背景
图像提取主色调来增强浸入式交互体验的场景越来越常见,如知乎网页版的个人主页,Instagram的图片色调筛选。那如何去获得一张照片的主色调呢?Google在Android.support.v7里,给出了一个叫做Palette(调色板)的方案。它的效果如下:
关于这套算法,我已经在之前的文章中给出了解析(
点击查看
)。算法虽好,可是它却是用Java写的,而且用了很多Android或者Java很多工具库的类。我们iOS党跟Palette之间可谓是程序员之间最远的距离:“你的源码就在那里不离不弃,我却望着不能调用的API徒增叹息”。
不过现在,咱们iOS党也有自己的Palette了!让我们调着Objective-C的API,趁着2017年WWDC的改革东风,走上通往幸福的康庄大道!
2.为什么要用Palette?
有人是否要问了,不就是提取图片主色调嘛,我遍历一遍图片的所有像素信息,然后统计一下哪个RGB值最多,不就是主色调嘛?
这种方案可不可以?并不是不可以,在一些简单的场景中,这样算的出来的效果也能差强人意。但是考虑一下这些场景:淘宝上的一张带有深色背景的商品图,夜晚的霓虹灯,如:
一排排黄的出油的ofo摆在灰色的大地上:
又或者当图片的主色调并不是纯色,而是处于渐变状态,这样就会分散RGB值,出现较大误差。所以我们很容易发现,图片的主色调往往并不是单纯的出现次数最多的RGB值。
它应该符合我们人眼的习惯,是我们一眼就能辨识出来的视觉焦点。而这正是Palette真正厉害之处。
3.所以Palette做了什么?
Palette有两大特色,也分别解决了两个大问题,
一是解决提取颜色是否是视觉焦点的问题,二是颜色分散的问题
。
(1)怎么解决颜色视觉焦点问题?
RGB色彩模式描述了三种颜色通道,这三种通道组合在一起,便成了我们最终能看到的颜色。它能表示的颜色数目多到惊人,能涵盖人眼能感知的所有色彩范围。但是它无法表示颜色对人眼的吸引程度。那让我们回想以上两张图,我们是不是一下子就被
亮丽
的蓝色和黄色给吸引了?注意,我用了
亮丽
这个词。
那什么是亮丽?答案是色彩的饱和度,也就是鲜艳度。以及恰到好处的色彩明度,也就是色彩的亮度。以及足够多的色彩数目,也就是该颜色或者颜色族所代表的像素个数。
综合来看,就是色彩饱和度越高,越鲜艳,越能吸引眼球。适当的明度也有助于提高色彩吸引度,过低的话色彩很暗,过高的话色彩趋近白色,都会让人眼忽略。至于色彩数目就不用多言,肯定越多越好嘛!
对图片色彩模式有过研究的同学肯定能猜出来我要说什么了。没错,就是用HSL色彩模式评价提示。饱和度就是HSL中的S(saturation),明度就是HSL中的L(lightness)。Palette的给出的解法就是用颜色的S和L值以及像素个数去评价一种颜色的得分。
而为了满足不同的颜色提取需求(比如有人希望提取亮的颜色,有人希望提取饱和低的颜色),Palette把颜色目标分成了六种。高亮度的Light类,普通亮度的Normarl类,暗亮度的Dark类。高饱和的Vibrant类,低饱和的Mute类。它们自由搭配可以得出六种模式:
LIGHT_VIBRANT_MODE (高亮度高饱和类)
VIBRANT_MODE(普通亮度高饱和类)
DARK_VIBRANT_MODE(暗亮度高饱和类)
LIGHT_MUTED_MODE(高亮度低饱和类)
MUTED_MODE(普通亮度低饱和类)
DARK_MUTED_MODE(暗亮度低饱和类)
每种颜色目标模式都有自己独特的Target参数,也就是S和L越靠近这个Target值得分越高,最终再综合像素个数的得分,得分最高的颜色也就是我们在对应模式下要提取的目标颜色。