LEColorPicker取色原理全景图从32×32缩放像素到YUV投票的完整算法流程【免费下载链接】LEColorPickerA Cocoa-Touch system for iOS to get a color scheme in function of an image, like iTunes 11 does.项目地址: https://gitcode.com/gh_mirrors/le/LEColorPickerLEColorPicker 是一款面向 iOS 的开源取色库它能像 iTunes 11 一样从一张图片中自动提取出背景色、主文字色和次文字色生成完整的配色方案。本文将用尽量通俗的方式完整拆解它的核心算法图片如何被缩放到 32×32、像素如何上传 GPU、YUV 空间中的投票如何找出主导色以及文字色是如何经过对比度过滤最终得到的。LEColorPicker 是什么一套图片驱动取色方案它的目标很单一也很实用给定任意一张UIImage输出一组 LEColorScheme 对象其中包含三个属性属性含义典型用途backgroundColor图片的主导色背景色页面底色primaryTextColor与背景反差最强且票最高的文字色标题文字secondaryTextColor第二反差色不足时回退为纯黑/纯白正文文字核心实现集中在 LEColorPicker/LEColorPicker.mYUV 颜色空间的数学工具在 LEColorPicker/UIColorYUVSpace.m示例调用在 LEColorPickerDemo/ViewController.m。完整算法流程从输入图片到三个颜色的四步流水线整体流程可以概括为缩放 → GPU 投票渲染 → 读回像素 → 过滤文字色。第一步把任意图片缩放为 32×32 方形在 colorSchemeFromImage: 中无论原图是 1080P 还是手机壁纸第一步都是压成 32×32 的方形小图宏LECOLORPICKER_GPU_DEFAULT_SCALED_SIZE见 LEColorPicker.m 第 24 行。这一步的意义在于取色本质是统计问题32×32 已经足够代表画面的色彩构成而后续计算量与像素数成正比——从百万级像素降到 1024 个这是性能的关键。缩放实现很朴素就是 Core Graphics 的drawInRect重绘见 scaleImage:width:height:。第二步OpenGL ES 上传纹理并离屏渲染缩放后的小图被逐像素转成 RGBA 字节流通过glTexImage2D上传为 GPU 纹理采样过滤设为GL_NEAREST不做插值保证投票结果不被糊掉见 setupTextureFromImage:。同时项目创建了一个 32×32 的离屏 Framebuffer 和深度缓冲setupOpenGL整个渲染不经过屏幕。渲染时只画一个覆盖全屏的四边形真正的计算全部在片元着色器里完成renderDominant。注意一个细节着色器只处理 32×32 的左上 16×16 区域ProccesedWidth 32/2其余部分输出纯黑这是为了把算力集中在有效区域。第三步片段着色器中的 YUV 投票——主导色提取的核心这是整个取色算法的灵魂。对左上 16×16 区域里的每一个像素着色器做两件事RGB 转 YUV采用电视标准 BT.601 的权重例如亮度分量为Y 0.299R 0.587G 0.114B完整的三通道转换见 kDominantFragmentShaderString 以及 CPU 侧的 UIColorYUVSpace.m。遍历全部 256 个像素拉票当前像素与区域内每个采样点计算 YUV 空间中的欧氏距离d若d 0.1就记一票累加 0.0039256 票恰好累加到 1.0。最后输出gl_FragColor vec4(R, G, B, 票数)——RGB 保留原色Alpha 通道被巧妙地借用来携带得票数。票数越高的颜色说明画面中越多像素与它相似也就是我们直觉中的主导色。第四步CPU 读回像素筛出两个文字色渲染完成后colorWithBiggerCountFromImageWidth:height: 通过glReadPixels把 32×32 的 RGBA 缓冲读回 CPU遍历 16×16 区域Alpha票数最大的像素的 RGB 值就是背景色。接着 findTextColorsTaskForColorScheme: 在同一份缓冲上做两轮排除法投票颜色筛选条件RGB 平方距离主文字色与背景色距离 (255 × 0.5)²在幸存者中取票数最高次文字色与背景距离 (255 × 0.5)²且与主文字色距离 (255 × 0.3)²取票数最高这里用到的容差宏定义在 文件头部的 Preprocessor 区。最后还有一道可读性保险isSufficienteContrastBetweenBackground:andForground:用 YUV 的亮度分量 Y 判断背景与次文字色的亮度差乘以 255 后需 ≥ 125且 RGB 各通道极差之和 500不达标时直接回退——背景偏暗就选白色文字偏亮就选黑色文字。为什么选 YUV 投票而不是 RGB 距离这是本文最重要的概念点。RGB 空间里看起来一样的颜色如浅灰与淡蓝坐标距离可能很远而人眼感知的相似性更接近亮度色度分离后的距离。YUV 把颜色拆成Y亮度0.299R 0.587G 0.114B决定深浅U、V色度决定冷暖色调在 YUV 空间用 0.1 的距离阈值投票统计出来的主导色更符合视觉直觉同时 GPU 对这种逐像素的向量运算有天然加速1024 次两两比较16×16 × 16×16 65536 次距离计算在着色器里一帧即可完成。这套思路借鉴自社区用 Mathematica 复现 iTunes 11 取色逻辑的经典方案见 README.md 致谢部分。如何在项目中调用 LEColorPicker使用极其简单三步走工程中加入 OpenGLES 框架把LEColorPicker文件夹拖入项目创建实例并同步取色LEColorScheme *scheme [colorPicker colorSchemeFromImage:image];把三个属性赋给视图颜色例如 ViewController.m 的 configureOutPutView: 就是这样做的。如果不想阻塞当前线程用异步接口 pickColorsFromImage:onComplete:它会在一条低优先级串行 GCD 队列上完成全部计算结果回主线程回调App 切到后台时还会自动挂起该队列appDidEnterBackground。旧版类方法 pickColorFromImage:onComplete: 内部也是这个实现返回字典而非对象。关键参数速查表与性能要点参数值位置作用LECOLORPICKER_GPU_DEFAULT_SCALED_SIZE32LEColorPicker.m#L24缩放边长决定计算量投票相似度阈值0.1着色器YUV 距离小于它算同款颜色单票权重0.0039着色器256 像素满票 Alpha 1.0背景过滤容差0.5LEColorPicker.m#L25文字色必须与背景拉开的距离主文字过滤容差0.3LEColorPicker.m#L26次文字色与主文字色的最小距离颜色差阈值500LEColorPicker.m#L27可读性校验的 RGB 通道极差亮度差阈值125LEColorPicker.m#L28可读性校验的 Y 亮度差性能要点作者特意注明真机比模拟器更快README.md因为核心路径跑在 GPU 上另外GL_NEAREST纹理过滤、16×16 有效区域裁剪、Alpha 通道携带票数一次渲染同时输出颜色统计都是值得借鉴的技巧。总结LEColorPicker 的取色流程可以一句话概括把图片压成 32×32交给 GPU 在 YUV 空间里让每个像素为相似色投票票数最高者即背景色再用 RGB 平方距离两轮排除法筛出两个足够反差的文字色最后用亮度对比度兜底保证可读性。整条流水线没有复杂的聚类算法却用最小计算量实现了接近 iTunes 11 的视觉效果——这也是它至今仍被当作图片取色库参考实现的原因。想动手验证可以直接打开 LEColorPickerDemo 工程翻页浏览 Resources 目录下的示例图片观察配色方案的实时变化。【免费下载链接】LEColorPickerA Cocoa-Touch system for iOS to get a color scheme in function of an image, like iTunes 11 does.项目地址: https://gitcode.com/gh_mirrors/le/LEColorPicker创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考