源码可见:[直接点击]

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

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

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

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

4.怎么使用iOS-Palette？

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

即可获得回调：

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

并且还可以使用 | 分隔符去满足不同的搭配需求，当你需要所有模式的下的目标颜色时，请使用: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)在白色背景干扰下的表现

2)在黑暗环境下的表现

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

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

(1)[点击查看]

(2)[点击查看]

(3)[点击查看]

(4)[点击查看]

(5)[点击查看]

(6)[点击查看]

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

美！视差滚动在图片滑块中的应用【附源码下载】
视差滚动(Parallax Scrolling)已经被广泛应用于网页设计中,这种技术能够让原本平面的网页界面产生动感的立体效果.下面分享的这个图片滑块效果是难得一见的结合视差滚动的例子,之前的文章给大 ...
美！视差滚动特效在图片滑块中的应用【附源码下载】
视差滚动(Parallax Scrolling)已经被广泛应用于网页设计中,这种技术能够让原本平面的网页界面产生动感的立体效果.下面分享的这个图片滑块效果是难得一见的结合视差滚动的例子,之前的文章给大 ...
如何提高网页中图片显示的用户体验（附源码下载）
文章中加入适量的图片不仅可以更好的说明和补充文章的内容,而且还可以极大的减缓阅读者在阅读较长篇幅文章时的疲劳和不安.所以图文混排较好的文章能给阅读者更好的用户体验和享受.但是令人遗憾的是很多的网页图片 ...
抢红包算法--四种抢红包算法对比（附源码）
还记着longlong ago 我还在做绿色征途手游版的时候有天策划同学要求同事一定要优化下抢红包算法本着划水第一吃瓜并列第一的原则于是我听到了一堆数学名词 ***定理 XXX公式呼~ ...
十大经典排序算法小结（附源码和菜鸟版注释）
序在十大经典排序算法(动画演示)这篇博客的指导下,博主一点一点码出了十大排序算法,并写了菜鸟级注释,源码戳这里,下面记录一下自己的总结,基本上是从注释搬来的. 排序算法主要分两类,一类是比较类排序, ...
springboot入门系列教程|第九篇：springboot实现图片上传与显示（附源码）
前言## 上一篇我们介绍了springboot如何实现自定义拦截器配合注解使用,那么这篇我们将介绍springboot实现图片上传的功能. 目录## 文章目录前言## 目录## 项目创建### 项目 ...
图像纹理合成及纹理传输算法学习（附源码）。
有2到3年没有逛CodeProject了,上班一时无聊,就翻翻这个比较有名的国外网站,在其Articles » Multimedia » General Graphics » Graphics一栏看到 ...
深度学习100例 | 第30天：TensorFlow2 实现动物识别（90类）MobileNetV2算法（内附源码与数据）
在之前的文章中我们通过Xception算法模型实现了狗.猫.鸡.马四种的动物的识别(新模型!实现动物识别).今天我们接着介绍MobileNetV2算法,将数据集扩充到90个类别,即使用 90 个不同类 ...
python炫酷动画源代码_Python tkinter实现的图片移动碰撞动画效果【附源码下载】...
本文实例讲述了Python tkinter实现的图片移动碰撞动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: #!/usr/bin/python # -*- coding ...

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