主题色提取

姚丽冰 学号：16050120089

转载：

https://juejin.im/entry/5a0e64ed51882535cd4a6679

【嵌牛导读】：在做音乐webapp的时候，被腾讯的一款本地音乐播放器（轻听）的播放界面惊艳到了，于是决定‘复制’下来。撸起袖子就开始干~

【嵌牛鼻子】：js插件：rgbaster.js，Color Thief，vibrant.js

【嵌牛提问】：首先想到的是绘入canvas中利用getImageData提取数据然后分析得到主题色，因为用的qq音乐api遇到了跨域问题，在解决跨域问题后，紧接着的问题是如何提取主题色。

【嵌牛正文】：

关于颜色提取的大概算法有这些

魔法数字法

八叉树提取法

最小插值法

中位切分法

聚类

......

具体的就看看这两篇啦

图片主题色提取算法小结

https://juejin.im/entry/5a0e64ed51882535cd4a6679

图像主题色提取算法

主题色提取

接下来介绍几款颜色提取的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获取图片数据，如果不是同源图片将无法使用

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