姚丽冰 学号：16050120089
转载：
https://juejin.im/entry/5a0e64ed51882535cd4a6679
【嵌牛导读】：在做音乐webapp的时候，被腾讯的一款本地音乐播放器（轻听）的播放界面惊艳到了，于是决定‘复制’下来。撸起袖子就开始干~
【嵌牛鼻子】：js插件：rgbaster.js，Color Thief，vibrant.js
【嵌牛提问】：首先想到的是绘入canvas中利用getImageData提取数据然后分析得到主题色，因为用的qq音乐api遇到了跨域问题，在解决跨域问题后，紧接着的问题是如何提取主题色。
【嵌牛正文】：
关于颜色提取的大概算法有这些
魔法数字法
八叉树提取法
最小插值法
中位切分法
聚类
......
具体的就看看这两篇啦
图片主题色提取算法小结
https://juejin.im/entry/5a0e64ed51882535cd4a6679
图像主题色提取算法
接下来介绍几款颜色提取的js插件
1.rgbaster.js
github地址。这是一段小脚本，可以提取图片的主色、次色。
使用
首先肯定是引入啦，然后上代码
const img = document.querySelector('img');
// 或者
// const img = 'http://example.com/image.jpg';
RGBaster.colors(img, {
// 调色板大小，就是提取的样本，越大越精确，同时性能越差
paletteSize: 30,
// 颜色排除
exclude: [ 'rgb(255,255,255)', 'rgb(0,0,0)' ],
success: function(payload) {
console.log('Dominant color:',payload.dominant);// 提取出来的主色
console.log('Secondary color:', payload.secondary);// 次色
console.log('Palette:', payload.palette); // 调色板
}})
提取出来的结果是一个rgb值
需要使用rgba值的同学，只需要正则一下，提取出来再拼接就好啦
const c = payload.dominant.match(/\d+/g);
const Color = `rgba(${c[0]},${c[1]},${c[2]},0.8)`;
颜色有深有浅，暗色的话，黑色字体就看不清了，文字颜色得随着背景色取反，我们可以把rgb值转化成灰度值来判断颜色深浅
let fontColor;
const grayLevel = c[0] * 0.299 + c[1] * 0.587 + c[2] * 0.114;
if (grayLevel >= 192) {
// 若为浅色，把文字设置为黑色
fontColor = '#000';
} else {
fontColor = '#fff';
}
最后再给大家附上另外两款颜色提取插件
2.Color Thief
项目地址
使用
// 提取主色
const img = document.querySelector('img');
var colorThief = new ColorThief();
console.log(colorThief.getColor(img));
}
// 调色板
var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 8);
结果
3.vibrant.js
从图像中提取突出的颜色。
Vibrant.js是Android支持库中令人敬畏的Palette类的JavaScript端口。
项目地址
使用
const img = document.querySelector('img');
var vibrant = new Vibrant(img);
var swatches = vibrant.swatches()
for (var swatch in swatches)
if (swatches.hasOwnProperty(swatch) && swatches[swatch])
console.log(swatch, swatches[swatch].getHex())
初步测试还是rgbaster出来的颜色最接近了，不过在项目中测试有些情况偏差有点远。而vibrant.js主要还是着重于把图片的颜色提取出来分类，如样例所示，结果分为暗色、亮色、突出色之类，提取主题色还是rgbaster好使。
注意： 这三款插件均是利用把图片绘入canvas获取图片数据，如果不是同源图片将无法使用
以上便是这次的文章分享了，欢迎留言相互学习~
