图片主色值获取脚本 rgbaster.js 介绍 & 使用

文章参考：
图片主色获取脚本rgbaster.js小介绍小使用 « 张鑫旭-鑫空间-鑫生活
rgbaster.js Github 地址
扩展脚本
如果要取多个颜色，推荐使用color-thief：https://github.com/lokesh/color-thief

• 温馨提示：

该示例需要在本地开一个服务这样才可以使 rgbaster.js 正常的访问到图片的具体信息，否则会有你跨域的报错信息

image.png

示例：

1. 简单的获取主色、次色、调色板

• 源码

• 控制台输出效果图

image.png

• 需要注意的地方：

image.png

由于该脚本是不能够跨域进行访问的，所以除了在服务器端增加标示： Access-Control-Allow-Origin: *之外，就只能将文件都放置在同一个服务器上，我这里是本地开的一个虚拟的服务器，所以像上面那样直接去访问另一个域名下的资源是不可以的

image.png

还有就是建议使用的图片尽量选择缩略图来进行色值获取，结果其实是和大图的一样的，但是大图在获取时或造成一定的卡顿或是闪屏

2. 扩展的完整的示例：

• 源码

• 控制台输出效果图

image.png

3. 加了样式的具体的实现

• 源码

• 浏览器效果图

image.png

整个的 padding 的背景色就是取得图片的主色值

Github 示例地址