在做音乐webapp的时候，被腾讯的一款本地音乐播放器（轻听）的播放界面惊艳到了（如下图），于是决定‘复制’下来。

撸起袖子就开始干~
首先想到的是绘入canvas中利用getImageData提取数据然后分析得到主题色，因为用的qq音乐api遇到了跨域问题，在解决跨域问题后（具体方法看这里跨域那些事），紧接着的问题是如何提取主题色。
关于颜色提取的大概算法有这些

魔法数字法
八叉树提取法
最小插值法
中位切分法
聚类
......
具体的就看看这两篇啦
图片主题色提取算法小结
 图像主题色提取算法

接下来介绍几款颜色提取的js插件

1.rgbaster.js

github地址。这是一段小脚本，可以提取图片的主色、次色。

使用

首先肯定是引入啦，然后上代码

const img = document.querySelector('img');
// 或者
// const img = 'http://example.com/image.jpg';
RGBaster.colors(img, {
     // 调色板大小，就是提取的样本，越大越精确，同时性能越差
     paletteSize: 30,
     // 颜色排除
     exclude: [ 'rgb(255,255,255)', 'rgb(0,0,0)' ],
     success: function(payload) {
        console.log('Dominant color:',payload.dominant);// 提取出来的主色
        console.log('Secondary color:', payload.secondary);// 次色
        console.log('Palette:', payload.palette); // 调色板
     }})

提取出来的结果是一个rgb值

需要使用rgba值的同学，只需要正则一下，提取出来再拼接就好啦

const c = payload.dominant.match(/\d+/g);
const Color = `rgba(${c[0]},${c[1]},${c[2]},0.8)`;

颜色有深有浅，暗色的话，黑色字体就看不清了，文字颜色得随着背景色取反，我们可以把rgb值转化成灰度值来判断颜色深浅

let fontColor;
const grayLevel = c[0] * 0.299 + c[1] * 0.587 + c[2] * 0.114;
      if (grayLevel >= 192) {
        // 若为浅色，把文字设置为黑色
        fontColor = '#000';
      } else {
        fontColor = '#fff';
      }

在项目中我就是用这个插件，成果是这样的

对项目感兴趣的点这里👉项目地址

最后再给大家附上另外两款颜色提取插件

2.Color Thief

项目地址

使用

// 提取主色
const img = document.querySelector('img');
var colorThief = new ColorThief();
    console.log(colorThief.getColor(img));
 }
// 调色板
var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 8);

结果

3.vibrant.js

从图像中提取突出的颜色。
Vibrant.js是Android支持库中令人敬畏的Palette类的JavaScript端口。
项目地址

使用

const img = document.querySelector('img');
var vibrant = new Vibrant(img);
    var swatches = vibrant.swatches()
    for (var swatch in swatches)
        if (swatches.hasOwnProperty(swatch) && swatches[swatch])
            console.log(swatch, swatches[swatch].getHex())

以上三个样例都是提取的同一张图片所得结果，看一下横向对比

初步测试还是rgbaster提取出来的颜色最接近了，不过在项目中测试有些情况偏差有点远。而vibrant.js主要还是着重于把图片的颜色提取出来分类，如样例所示，结果分为暗色、亮色、突出色之类，提取主题色还是rgbaster好使。

注意：这三款插件均是利用把图片绘入canvas获取图片数据，如果不是同源图片将无法使用

以上便是这次的文章分享了，欢迎留言相互学习~