主题色提取

14,323 阅读3分钟

在做音乐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获取图片数据,如果不是同源图片将无法使用

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