美文网首页iOS 实用技术iOS 开发学习
iOS图片精确提取主色调算法iOS-Palette(附源码)

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

作者: 唐笛_Dylan | 来源:发表于2017-06-06 23:18 被阅读4302次

    源码可见:[直接点击](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

    简书:http://www.jianshu.com/p/01df6010dded

    相关文章

      网友评论

      • 8bfca968135d:求问,网络连接转成image类型获取色值时候经常出错,获取不到,该怎么解决?或者说网络图片链接怎么获取色值?
        唐笛_Dylan:@许你一世柔情 这个问题已知,应该是图片格式的问题,我近期修复一下
      • 银光:最近做项目想用图片提取主色调,本以为要自己定义 HSL 等一堆规则让工程师写算法 看了博主的文章 方便不少~ 还了解了背后的原理 效果也是棒棒的~ 感谢~
      • 天蓬大元:出现一张图片返回多次的情况,大神遇到过吗
        唐笛_Dylan:@天蓬大元 我近期修复一下...
        唐笛_Dylan:@天蓬大元 查出了大概原因,在解决
      • 天蓬大元:出现了延迟的情况,怎么避免啊
      • 天蓬大元:getColorBlock初始化失败是怎么回事啊
        天蓬大元:将代码属性代码改到.h文件,并写明set方法后,回调可以了。
      • 44d3387e09f3:除了666, 还能说什么呢?
      • 小冰山口:除了666, 还能说什么呢?
      • ling9400:楼主,既然你说到android 上的paletter了,我就问下你有没有测试过android 上用paletter取的颜色值,跟你用ios的这种算法取到的颜色值的区别呢?我测试了下,取到的颜色值不一样,这是什么原因呢?
        唐笛_Dylan:@ling9400 哦,有一点忘记了。Android的Palette算法是压缩之后的图片,因为我目前没有找到在iOS上稳定的压缩算法(就是每一次压缩之后的像素信息一致),所以目前还是采用的原图信息。所以如果说有偏差是可以理解的,因为我们拿来计算的像素信息不一样。
        ling9400:@唐笛_Dylan 你的demo里面也不是说等图片显示了再用显示的图片去做处理计算颜色值的吧?你是直接从相册里面取的图片(也就是拍照的图片),在这种情况下所有的手机上的图片都是一样的吧!所以应该拿到的原始像素信息应该是一样的才对哦!
        唐笛_Dylan:@ling9400 我是这样理解的。不同手机上对图片的显示是不一样的,有些手机会增加饱和度,有些手机会增加明度。所以导致我拿到的原始像素信息就不一样,所以出现了不一致。
      • 14bf7199f818:好文!已收入《iOS - 音视频/图文/动画》专题,感谢作者的分享!
        ———————————————————————————————
        不定期更新高质量文章,欢迎投稿关注,更多iOS专项专题:
        http://www.jianshu.com/c/563ba4d42d38[iOS - 大杂烩]
        http://www.jianshu.com/c/1fee819318a7[iOS - 内存/数据/存储]
        http://www.jianshu.com/c/6a28d1d173b5[iOS - 线程/底层]
        http://www.jianshu.com/c/4dd5a67bbe1d[iOS - 音视频/图文/动画]
        http://www.jianshu.com/c/2de7446d0de9[iOS - 网络处理]
        http://www.jianshu.com/c/5458bca566a9[iOS - 安全/逆向]
        http://www.jianshu.com/c/ca237eb95714[iOS - 优化/质量]
        唐笛_Dylan:多谢喜欢:smile:

      本文标题:iOS图片精确提取主色调算法iOS-Palette(附源码)

      本文链接:https://www.haomeiwen.com/subject/mcbnfxtx.html