获取图像中主要(最多)的颜色色值

获取图像中主要(最多)的颜色色值

  // 获取<template>中的img标签，标签可以引入本地或者网络图片地址
  const img: any = this.$refs.img;    
  img.onload = () => {
    // 获取前2的色值(rgb格式)
    const imageColor = this.$tf.getImageColor(img, document.createElement('canvas'));
    // 如果需要计算图像的色值(包含底色)建议选0下标，反之建议选1下标
    const obj = imageColor[1];
    const data:string = Object.keys(obj)[0];
    this.mainColor = {
      color: `rgb(${data})`,
      number: obj[data]
    };
  };

getImageColor的函数

  getImageColor(dom:any, cv:any) {
    cv.width = dom.width;
    cv.height = dom.height;
    const ctx: any = cv.getContext('2d')
    ctx.drawImage(dom, 0, 0);
    // 获取图像像素点数据
    const data = ctx.getImageData(0, 0, cv.width, cv.height).data;
    // 将像素点转化成颜色数组
    const colorData = []
    for (var i = 0; i < data.length; i += 4) {
      colorData.push(`${data[i]},${data[i + 1]},${data[i + 2]}`)
    }
    // 将像素点去重并获取到对应的像素点数量
    const colorObj:any = {}    
    colorData.forEach(val => {      
      if(colorObj[val]) {
        colorObj[val] += 1
      } else {
        colorObj[val] = 1
      }      
    })

    // 把去重的对象，转化成数组
    const arrKeys = Object.keys(colorObj)
    const colorArr:any = []
    arrKeys.forEach(val => {
      colorArr.push({
        [val]: colorObj[val]
      })
    })

    // 排序
    colorArr.sort((a:any, b:any) => {
      const akeys:string = Object.keys(a)[0]
      const bkeys:string = Object.keys(b)[0]
      return  b[bkeys] - a[akeys] 
    })

    // 返回前2个色值
    return colorArr.slice(0,2)
  }

示例: