文章参考：
图片主色获取脚本rgbaster.js小介绍小使用 « 张鑫旭-鑫空间-鑫生活
rgbaster.js Github 地址
扩展脚本
如果要取多个颜色，推荐使用color-thief：https://github.com/lokesh/color-thief
- 温馨提示：
该示例需要在本地开一个服务这样才可以使 rgbaster.js 正常的访问到图片的具体信息，否则会有你跨域的报错信息
image.png
示例：
- 简单的获取主色、次色、调色板
- 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取图片主题色脚本基础示例</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是调色板，含多个主要颜色，数组
console.log(payload.dominant);
console.log(payload.secondary);
console.log(payload.palette);
}
});
</script>
</body>
</html>
- 控制台输出效果图
image.png
- 需要注意的地方：
image.png
由于该脚本是不能够跨域进行访问的，所以除了在服务器端增加标示：Access-Control-Allow-Origin: *之外，就只能将文件都放置在同一个服务器上，我这里是本地开的一个虚拟的服务器，所以像上面那样直接去访问另一个域名下的资源是不可以的
image.png
还有就是建议使用的图片尽量选择缩略图来进行色值获取，结果其实是和大图的一样的，但是大图在获取时或造成一定的卡顿或是闪屏
- 扩展的完整的示例：
- 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取图片主题色脚本扩展的完整的示例</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 从调色板返回最多30个顶级颜色
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>
- 控制台输出效果图
image.png
- 加了样式的具体的实现
- 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取图片主题色脚本扩展的完整的示例</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 从调色板返回最多30个顶级颜色
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);//调色板
}
})
</script>
</body>
</html>
- 浏览器效果图
image.png
整个的padding的背景色就是取得图片的主色值