前端-获取图片主色调

参考自张鑫旭，地址：https://www.zhangxinxu.com/wordpress/2014/08/image-dominant-color-get-rgbaster-js/
插件git地址：https://github.com/briangonzalez/rgbaster.js

分四步

1. 下载插件
   npm i rgbaster -S
2. 引入插件
   import rgbaster from 'rgbaster'
3. 使用插件

let result = rgbaster(
   this.imgSrc,  // 图片地址
   {
      ignore: ['rgb(255,255,255)', 'rgb(0,0,0)'],  // 要忽略识别的颜色
      scale: 0.6 // 查询时缩小图片，降低精度。换取识别速度提高
   }
 )

4. 为所欲为

result.then((res)=>{
  let imgColor = res[0].color // rgb(68,50,36)
  document.getElementsByTagName('body')[0].style.background = imgColor 
})

完整代码

<template>
  <div>
    <img :src="imgSrc" alt="">
  </div>
</template>

<script>
import rgbaster from 'rgbaster'
export default {
  data() {
    return {
      imgSrc: require('@/assets/6.jpg')
    }
  },
  mounted() {
    let result = rgbaster(
      this.imgSrc, 
      {
        ignore: ['rgb(255,255,255)', 'rgb(0,0,0)']
      }
    )
    result.then((res)=>{
      console.log(res[0].color);
      document.getElementsByTagName('body')[0].style.background = res[0].color
    })
  }
}
</script>

<style>
  img {
    width: 300px;
    margin: 0 auto;
    margin-top: 50px;
    display: block;
  }
</style>