博客

首先，这个js官网已经与2019年停止维护更新。且是需要科学上网。这里贴上js下载地址

rgbaster.min.js

提取码：28vw

上面那个好像用不了，这里附上我实测能用的

rgbaster.js

提取码：07ej

最简单获图片色调代码：

var img = document.getElementById('image');
// 或者
var img = 'http://example.com/path-to-image.jpg'

RGBaster.colors(img, {
  success: function(payload) {
    // payload.dominant是主色，RGB形式表示
    // payload.secondary是次色，RGB形式表示
    // payload.palette是调色板，含多个主要颜色，数组
    console.log(payload.dominant);
    console.log(payload.secondary);
    console.log(payload.palette);
  }
});

就一个方法，RGBaster.colors就可以了，第1个参数img可以是图片DOM也可以是图片的URL地址。后面就是可选参数，说到可选参数，不只success这一个，还有下面这几位兄弟：

RGBaster.colors(img, {
  paletteSize: 30, // 调色板大小
  exclude: [ 'rgb(255,255,255)' ],  // 不包括白色
  success: function(payload){
    // 包含一些颜色信息(payload)的回调
  }
})

paletteSize为30, 则payload.palette就是个包含前30主要颜色值的数组。

exclude表示数组中的颜色不参与，剔除。例如，一个小龙女舞剑的图片，我们可能需要的是其舞剑的背景。但是，由于小龙女长年古墓，缺少阳光，面色白皙，加上总是一袭白衣，这大大的白色虽是主色，但却不是我们想要的，于是需要剔除。

success就是我们下厨的主要内容了，回调中的payload参数，包含，主色、次色以及调色板信息，绝对可以满足我们绝大多数的需求。

例子2：

解决字体颜色与背景色冲突的问题

这里我们只用到了主色，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");
          }
        }
   });