文章參考：
圖片主色獲取腳本rgbaster.js小介紹小使用 ? 張?chǎng)涡?鑫空間-鑫生活
rgbaster.js Github 地址
擴(kuò)展腳本
如果要取多個(gè)顏色，推薦使用color-thief：https://github.com/lokesh/color-thief
- 溫馨提示：
該示例需要在本地開(kāi)一個(gè)服務(wù)這樣才可以使 rgbaster.js 正常的訪問(wèn)到圖片的具體信息码倦，否則會(huì)有你跨域的報(bào)錯(cuò)信息
image.png
示例：
- 簡(jiǎn)單的獲取主色抡草、次色柴罐、調(diào)色板
- 源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取圖片主題色腳本基礎(chǔ)示例</title>
<script src="./rgbaster.js"></script>
</head>
<body>
<img src="./demo.jpg" alt="" id="image">
<script type="text/javascript">
var img = document.getElementById('image');
RGBaster.colors(img, {
success: function(payload) {
// You now have the payload.
// payload.dominant是主色脯倒，RGB形式表示
// payload.secondary是次色梭姓，RGB形式表示
// payload.palette是調(diào)色板仪搔，含多個(gè)主要顏色忧换，數(shù)組
console.log(payload.dominant);
console.log(payload.secondary);
console.log(payload.palette);
}
});
</script>
</body>
</html>
- 控制臺(tái)輸出效果圖
image.png
- 需要注意的地方：
image.png
由于該腳本是不能夠跨域進(jìn)行訪問(wèn)的恬惯，所以除了在服務(wù)器端增加標(biāo)示：Access-Control-Allow-Origin: *之外，就只能將文件都放置在同一個(gè)服務(wù)器上亚茬，我這里是本地開(kāi)的一個(gè)虛擬的服務(wù)器酪耳，所以像上面那樣直接去訪問(wèn)另一個(gè)域名下的資源是不可以的
image.png
還有就是建議使用的圖片盡量選擇縮略圖來(lái)進(jìn)行色值獲取，結(jié)果其實(shí)是和大圖的一樣的刹缝，但是大圖在獲取時(shí)或造成一定的卡頓或是閃屏
- 擴(kuò)展的完整的示例：
- 源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取圖片主題色腳本擴(kuò)展的完整的示例</title>
<script src="./rgbaster.js"></script>
</head>
<body>
<img src="./demo.jpg" alt="" id="image">
<script type="text/javascript">
var img = document.getElementById('image');
RGBaster.colors(img, {
// return up to 30 top colors from the palette 從調(diào)色板返回最多30個(gè)頂級(jí)顏色
paletteSize: 30,
// don't count white
//排除 白色
exclude: ['rgb(255,255,255)'],
// do something when done
//獲取成功之后
success: function(payload) {
console.log('Dominant color:', payload.dominant);
console.log('Secondary color:', payload.secondary);
console.log('Palette:', payload.palette);
}
})
</script>
</body>
</html>
- 控制臺(tái)輸出效果圖
image.png
- 加了樣式的具體的實(shí)現(xiàn)
- 源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取圖片主題色腳本擴(kuò)展的完整的示例</title>
<script src="./rgbaster.js"></script>
<style>
img{
padding: 40px;
}
</style>
</head>
<body>
<img src="./demo.jpg" alt="" id="image">
<script type="text/javascript">
var img = document.getElementById('image');
RGBaster.colors(img, {
// return up to 30 top colors from the palette 從調(diào)色板返回最多30個(gè)頂級(jí)顏色
paletteSize: 30,
// don't count white
//排除 白色
exclude: ['rgb(255,255,255)'],
// do something when done
//獲取成功之后
success: function(payload) {
// img.style.backgroundColor = payload.dominant;
img.style.backgroundColor = payload.secondary;
console.log('Dominant color:', payload.dominant);//主色
console.log('Secondary color:', payload.secondary);//次色
console.log('Palette:', payload.palette);//調(diào)色板
}
})
</script>
</body>
</html>
- 瀏覽器效果圖
image.png
整個(gè)的padding的背景色就是取得圖片的主色值
