标签：const val 色值 colorObj cv 获取 图像 data any

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

  // 获取<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)
  }

示例:

标签：const,val,色值,colorObj,cv,获取,图像,data,any
来源： https://blog.csdn.net/m0_46208009/article/details/118672507

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。