V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
luminqi
V2EX  ›  JavaScript

javascript 获取图片主颜色

  •  
  •   luminqi · 2018-11-01 00:06:50 +08:00 · 5294 次点击
    这是一个创建于 2201 天前的主题,其中的信息可能已经有所发展或是发生改变。
    7 条回复    2018-11-01 14:29:44 +08:00
    IOriens
        1
    IOriens  
       2018-11-01 01:01:22 +08:00
    那我也推荐一下自己做的小程序好了,图片主色彩分析、色彩拾取、配色大全。

    ![主色分析小程序]( https://i.loli.net/2018/11/01/5bd9dfbe5d196.png)
    IOriens
        2
    IOriens  
       2018-11-01 01:12:29 +08:00
    showecho
        3
    showecho  
       2018-11-01 08:14:52 +08:00
    这个确实不错,刚好用到
    TangMonk
        4
    TangMonk  
       2018-11-01 10:25:09 +08:00
    原理是遍历所有的像素点,然后找到最多出现的几个像素吗?
    RingoTC
        5
    RingoTC  
       2018-11-01 10:48:27 +08:00
    @TangMonk 他是取平均值,如果是求像素色值的众数,那么如果有一个纯色渐变的图像(每个像素点的色值各不相同),然后在这个图像中随机增加几个同色的像素点。但是整个图像的主颜色不应该是那些同色像素点的颜色。
    luminqi
        6
    luminqi  
    OP
       2018-11-01 10:59:34 +08:00   ❤️ 1
    @TangMonk
    首先像素的 rgb 值有 256*256*256 种可能,所以如果直接遍历然后统计相同的 rgb 值是不靠谱的。
    这里其实会涉及到色彩量化(color quantization)。比较常见的算法有 Median cut, Octree, KMeans。
    我并没有采用常规的方案,我的想法是如果能先把各个像素按照其颜色相近度排序,这样相似的颜色就会靠在一起,形成一条连续的色带。那么剩余的工作就很简单了,就是把这条色带切成一块一块,每一块代表一种颜色,每一块的颜色是它里面所有像素 rgb 值的平均值。比较可惜的是其实并不能完全对颜色排序,这里我采用色调(hue)进行排序并不完美。
    你提出的算法我也想过,我觉得可以先对每个像素的 r 值,g 值,b 值向右位移(>>)3 位(或者更多),这样可以减少出现不同 rgb 值的概率。然后用一个 hash map 统计相同的 rgb 值。
    sincw
        7
    sincw  
       2018-11-01 14:29:44 +08:00
    学习了,赞一个
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2615 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 05:33 · PVG 13:33 · LAX 21:33 · JFK 00:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.