图像识别根据封面图主色调更改博客主题颜色

在项目中，比如想让轮播图周围颜色和轮播图本身主色调颜色相同。那么就要用到简单的图像识别技术，强大的 js 中就有这样的库供我们使用，接下来让我们一探究竟。

1.rgbaster.js

github地址提取图片的主色、次色。

引入 rgbaster.js 文件，开始使用。

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 可以进行以下操作：

1 2	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

github地址

// 提取主色
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

github地址从图像中提取突出的颜色。

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())