从图像提取主色

在web开发中有一个需求，可以根据图片内容动态提取主色改变背景颜色。满足需求的常用第三方库有node-vibrant，rgbaster，Color Thief

1. node-vibrant

添加依赖库

"node-vibrant": "^3.1.5",

导入import

import * as Vibrant from 'node-vibrant'

使用

getColor() {
  const imageUrl = this.state.mediaCover
  Vibrant.from(imageUrl)
    .getPalette()
    .then((palette) => {
      console.log(palette)
    	// Vibrant：充满活力的
    	// LightVibrant：
    	// DarkVibrant：
    	// LightMuted：
    
    	// 找到最匹配颜色
    	this.findBestColor()  
    })
}

findBestColor() {
  let maxPopulation = 0
  let maxKey
  for (const key in palette) {
    if (palette.hasOwnProperty(key) && maxPopulation < palette[key].population) {
      maxPopulation = palette[key].population
      maxKey = key
    }
  }
  const imgColor = palette[maxKey]
  this.handleImgColor(imgColor)
}

// 修正为可视性颜色
handleImgColor = (imgColor) => {
  // 若0≤S1<20 ，则S1=20；若20≤S1≤70 ，则S2=S1；若70＜S1≤100 ，则S2=70
  // 若0≤L1<20 ，则L2=20；若20≤L1≤50 ，则L2=L1；若50＜L1≤100 ，则L2=50
  const imgHsl = imgColor._hsl
  const s = imgHsl[1] < 0.2 ? 0.2 : (imgHsl[1] > 0.7 ? 0.7 : imgHsl[1])
  const l = imgHsl[2] < 0.2 ? 0.2 : (imgHsl[2] > 0.5 ? 0.5 : imgHsl[2])
  const newHsl = Vibrant.Util.hslToRgb(imgHsl[0], s, l)
  const r = newHsl[0]
  const g = newHsl[1]
  const b = newHsl[2]
  this.setState({
    bgColor: Vibrant.Util.rgbToHex(r, g, b)
  })
}

2. rgbaster.js

添加依赖库

"rgbaster": "^2.1.1"

导入import

import rgbaster from 'rgbaster'

使用

const imageUrl = song.picture
rgbaster(imageUrl, {
  ignore: ['rgb(255,255,255)', 'rgb(0,0,0)'],  // 要忽略识别的颜色
  scale: 0.5 // 查询时缩小图片，降低精度换取识别速度提高
}).then(res => {
  const imgColor = res[0].color
  this.setState({
    bgColor: imgColor
  })
})

参考文章:

前端图片主题色提取

魔法色预览工具