昨天，我们公司漂亮的美工小姐姐跑来我身边，戴着个大口罩，忽闪着俩大眼晴，显得更美了.......
正当我沉浸在美景当中时，口罩后面传来一声娇滴滴的声音：“哥，求你个事呗？”
赶紧收回我的心猿意马，正经答道：“啥事求哥，尽管讲！”
她直接往我的微信里面扔了一张图：
然后劈头就怼：“你瞅瞅你们写的程序，显示的这个标题，谁能看见啊！”
我赶紧满脸堆笑的解释：“不好意思，这是背景色太浅了，要不搞个深颜色的背景图片？”
美女不依不饶：“限制了背景色，会严重限制我的创意空间的，再这样下去，熬得我黑眼圈都出来了！能不能在深色背景显示白色字，在浅色背景显示黑色字？”
我仔细瞅了瞅那个大眼睛，心想：“有个黑眼圈可能也不丑吧！”，嘴上赶紧说：“交给哥了，哥马上给你解决！”
她转身离去了，我已经顾不上看她妖饶的背影，赶紧找找有没有合适的方法。
嘿，还真让我找到了，这就是rgbaster.js。
rgbaster.js介绍
rgbaster.js是一个工具包，主要用于获取图片的主色，根据主色的不同，就可以设置图片不同的文字前景色，就可以解决美女的需求了。
下载地址：https://github.com/briangonzalez/rgbaster.js/releases
简单示例 ：
先以一个示例入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./rgbaster.min.js"></script>
</head>
<body>
<img src="./test.jpg" id="testimage">
<script type="text/javascript">
var img = document.getElementById('testimage');
RGBaster.colors(img, {
success: function(payload) {
//以下三种颜色，都是RGB格式存在
// payload.dominant 主色
console.log(payload.dominant);
// payload.secondary 次色
console.log(payload.secondary);
// payload.palette 调色板
console.log(payload.palette);
}
});
</script>
</body>
</html>
调用是如刺的简单，有信心了吧！
解决字体颜色与背景色冲突的问题
这里我们只用到了主色，payload.dominant。
这里多说两句颜色格式，颜色格式常用的有两种： RGB和HSB
RGB: 是三种颜色的混合 R(红色) G（绿色） B(蓝色) ，根据这三种颜色的比例不同，可以混合出不同的颜色来。每个值的范围都是0-255之间；
HSB：H(hues)表示色相，按0-360来形成颜色的周期，S(saturation)表示饱和度，B（brightness）表示亮度
rgbaster.js返回的RGB格式，为了实现“深色背景显示白色字，浅色背景显示黑色字”的需求，需要有一点点小计算。
原理很简单，把RGB三个颜色分量拆出来，计算一个平均值，如果平均值小于设定的阈值，即认为是浅色背景；如果平均值大于阈值，则认为是深背景。
直接上代码：
RGBaster.colors(list[i].image, {
paletteSize: 30,
exclude: ['rgb(255,255,255)'],
success: function(payload) {
var newArry = payload.dominant.split('(');
newArry = newArry[1].split(')');
newArry = newArry[0].split(',');
var number = 0;
newArry.forEach((item)=>{
number+=item*1;
});
if(number / 3 > 200){
//浅色背景，设置为黑字
$(".title").css("color","#2c2c2c");
}else {
//深色背景，设置为白字
$(".title").css("color","#fff");
}
}
});
增加以上代码后，实现最终效果如下：
