Extraer el color del tema de una imagen

Documento de referencia: https://kuangyx.cn

Idea general: dibuje la imagen en un lienzo y luego obtenga el color de cada punto del lienzo, el último del mismo color es el color del tema, creo que los datos obtenidos por esta idea son relativamente precisos y vea otros Esto El artículo fue escrito por alguien, pero la mayor parte es para obtener el color de la esquina superior izquierda del lienzo, que es relativamente unilateral, así que finalmente elegí este, bueno, esta es la idea general y la implementación específica. ¡el código mira hacia abajo!

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<style>
  img {
    width: 300px;
  }
</style>

<body>
  <img src="https://qiniu.ve-link.com/files/4/d/f2/8666e5e6af0e58dda40ea323f029715302f9f2d4.png" id="img">
</body>


<script type="text/javascript">
  const oImg = document.getElementById('img');
  oImg.crossOrigin = ''
  oImg.onload = function () {
    const w = this.width;
    const h = this.height;
    // 创建画布
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    // 绘制图片在画布上
    const context = canvas.getContext('2d');
    context.drawImage(this, 0, 0);
    // onload 内
    let pxArr = context.getImageData(0, 0, w, h).data;
    pxArr = Array.from(pxArr);

    // onload 内
    const colorList = {}
    let i = 0;
    while (i < pxArr.length) {
      const r = pxArr[i];
      const g = pxArr[i + 1];
      const b = pxArr[i + 2];
      // const a = pxArr[i + 3];
      i = i + 4; // 最后 +4 比每次 i++ 快 10ms 左右性能
      // const key = [r, g, b, a].join(',')
      const key = [r, g, b].join(',')
      key in colorList ? ++colorList[key] : (colorList[key] = 1)
    }

    // onload 内
    let arr = [];
    for (let key in colorList) {
      arr.push({
        rgba: `rgb(${key})`,
        num: colorList[key]
      })
    }
    arr = arr.sort((a, b) => b.num - a.num)
    console.log(arr)
  }
</script>
</html>

Lo que sea que te preocupe te controlará, ¡vamos! ! !

Extraer el color del tema de una imagen

Supongo que te gusta