iOS图片精确提取主色调算法iOS-Palette(附源码)

源码可见:[直接点击](Github的README会更新Change Log和待办任务TODO,强烈建议关注)

1.背景

图像提取主色调来增强浸入式交互体验的场景越来越常见,如知乎网页版的个人主页,Instagram的图片色调筛选。那如何去获得一张照片的主色调呢?Google在Android.support.v7里,给出了一个叫做Palette(调色板)的方案。它的效果如下:

Google官方效果图

关于这套算法,我已经在之前的文章中给出了解析(点击查看)。算法虽好,可是它却是用Java写的,而且用了很多Android或者Java很多工具库的类。我们iOS党跟Palette之间可谓是程序员之间最远的距离:“你的源码就在那里不离不弃,我却望着不能调用的API徒增叹息”。

不过现在,咱们iOS党也有自己的Palette了!让我们调着Objective-C的API,趁着2017年WWDC的改革东风,走上通往幸福的康庄大道!

2.为什么要用Palette?

有人是否要问了,不就是提取图片主色调嘛,我遍历一遍图片的所有像素信息,然后统计一下哪个RGB值最多,不就是主色调嘛?

这种方案可不可以?并不是不可以,在一些简单的场景中,这样算的出来的效果也能差强人意。但是考虑一下这些场景:淘宝上的一张带有深色背景的商品图,夜晚的霓虹灯,如:

黑暗中的球灯

一排排黄的出油的ofo摆在灰色的大地上:


灰色大地上的一排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值得分越高,最终再综合像素个数的得分,得分最高的颜色也就是我们在对应模式下要提取的目标颜色。

(2)怎么解决颜色分散问题?

另外一个难题就是颜色分散,毕竟RGB值完全相等的情况太少了。比如蓝天,靠近太阳的地方会更白更亮,远离太阳的地方蓝色会更纯更饱和。太分散的情况下,很容易蓝色会输给颜色相对更集中的其他颜色,如海边的长满绿色植被的山。这个时候,我们需要用一个把这些相近却不相同的蓝色给框在一起,然后计算他们的平均颜色,来代表它们,这就是Palette中VBox的概念。进一步了解VBox,移步我之前的分析文章[点击查看]。

Palette解决了这两大问题,让识别效果变得更加精确!所以当你需要去识别图片的主色调时,别忘了Palette。

4.怎么使用iOS-Palette?

在iOS-Palette中,我采用了跟TTAVPlayer[了解更多,点击查看]一样的设计思想:“保证最小的接入成本同时保证最大的扩展性”。对于绝大部分需求,你不需要去了解PaletteTarget,什么高亮度低饱和这样的概念,你只需要调用这些简单的API:

Class:Palete
Class:UIImage+Palette

即可获得回调:

回调函数中取recommendColor

但是当你需要更多的颜色模式时,你可以使用

Class:UIImage+Palette

并且还可以使用 | 分隔符去满足不同的搭配需求,当你需要所有模式的下的目标颜色时,请使用:ALL_MODE_PALETTE,快捷获取所有模式的颜色。这些数据将会在回调Block中的allModeColorDic的字典中带回来。

Tips:推荐颜色的逻辑是优先选VIBRANT_MODE下的颜色,如果该模式下没有识别出目标颜色,则会按照MUTE_MODE------LIGHT_VIRANT_MODE ------LIGHT_MUTE_MODE------DARK_VIBRANT_MODE------DARK_MUTE_MODE的继承顺序进行传递。

5.Demo的效果一览

(1)在白色背景干扰下的表现

效果图1

(2).在黑暗环境下的表现

效果图2

3.正常光照环境下的表现

效果图3

由于每张图都有点大,更多的效果图可以点击查看:

(1)[点击查看]

(2)[点击查看]

(3)[点击查看]

(4)[点击查看]

(5)[点击查看]

(6)[点击查看]

6.关于作者

知乎:https://www.zhihu.com/people/tang-di-78/activities

Github:https://github.com/tangdiforx/iOSPalette

简书://www.greatytc.com/p/01df6010dded

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,499评论 25 707
  • 30种PS技术,让你的照片美到不行! 自从有了“PS(Photoshop)”以后,很多事情变成了可能,你可以上九天...
    八爷君阅读 3,210评论 3 45
  • 来来来,问大家一个问题,你会用Excel么? 办公室软件谁不会? 然而,日本一位70多岁的老爷爷 用电脑作画已经有...
    书画艺贰叁阅读 3,507评论 0 0
  • 什么时候开始,它不再是心中最珍贵的记忆,却变成了痛楚的滴血!不愿别人提起,恨不得时间能倒流,狠狠地践踏一回!
    缺爱的猪阅读 220评论 0 1
  • 四月的哈尔滨,这几天风兼雨声,淅淅落落的,空气倒是清新了不少,花儿在春雨的滋润下,竞相绽放了,那朵朵开的那么美,着...
    月明红红阅读 351评论 0 3