Palette - javascript 获取图片主颜色

找到图像中的主色。

Palette 可以帮助你找到图片中的主色。

V2ex 介绍:https://www.v2ex.com/amp/t/503218

Githubhttps://github.com/Luminqi/Palette

Demo:https://color.luminqi.com/

Github 文件本站下载:

Palette-master.zip

提取码:无
解压码:无
javascript - 获取图片主颜色

如何使用?

Palette.from可以接受元素或路径

Palette.from('/path/to/image').getPalette().then(colors => {
  // your code
})

-

const img = document.getElementById('img')
Palette.from(img).getPalette().then(colors => {
  // your code
})

耗时的计算过程在WebWorker中运行。

这是什么想法?

  • 它将首先开始欠采样以减少图像像素。
  • 计算每个像素的色调,并按色调对像素进行排序。
  • 将具有相似色调的像素分组。
  • 如果组中的像素很少或者它们的平均颜色太近,则合并这些组。

原理是遍历所有的像素点,然后找到最多出现的几个像素吗?

首先像素的 rgb 值有 256*256*256 种可能,所以如果直接遍历然后统计相同的 rgb 值是不靠谱的。

这里其实会涉及到色彩量化(color quantization)。比较常见的算法有 Median cut, Octree, KMeans。

我并没有采用常规的方案,我的想法是如果能先把各个像素按照其颜色相近度排序,这样相似的颜色就会靠在一起,形成一条连续的色带。那么剩余的工作就很简单了,就是把这条色带切成一块一块,每一块代表一种颜色,每一块的颜色是它里面所有像素 rgb 值的平均值。比较可惜的是其实并不能完全对颜色排序,这里我采用色调(hue)进行排序并不完美。

你提出的算法我也想过,我觉得可以先对每个像素的 r 值,g 值,b 值向右位移(>>)3 位(或者更多),这样可以减少出现不同 rgb 值的概率。然后用一个 hash map 统计相同的 rgb 值。

最后修改: 2019-10-23 02:33
资源

Docsify - 一个神奇的文档网站生成工具

2019-9-14 14:52:52

资源

Xiuno - BBS论坛系统

2019-9-29 0:01:52

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
搜索