昨天，我們公司漂亮的美工小姐姐跑來我身邊，戴着個大口罩，忽閃着倆大眼晴，顯得更美了.......
正當我沉浸在美景當中時，口罩後面傳來一聲嬌滴滴的聲音：“哥，求你個事唄？”
趕緊收回我的心猿意馬，正經答道：“啥事求哥，儘管講！”
她直接往我的微信裏面扔了一張圖：
然後劈頭就懟：“你瞅瞅你們寫的程序，顯示的這個標題，誰能看見啊！”
我趕緊滿臉堆笑的解釋：“不好意思，這是背景色太淺了，要不搞個深顏色的背景圖片？”
美女不依不饒：“限制了背景色，會嚴重限制我的創意空間的，再這樣下去，熬得我黑眼圈都出來了！能不能在深色背景顯示白色字，在淺色背景顯示黑色字？”
我仔細瞅了瞅那個大眼睛，心想：“有個黑眼圈可能也不醜吧！”，嘴上趕緊說：“交給哥了，哥馬上給你解決！”
她轉身離去了，我已經顧不上看她妖饒的背影，趕緊找找有沒有合適的方法。
嘿，還真讓我找到了，這就是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");
}
}
});
增加以上代碼後，實現最終效果如下：
