canvas 从图片中提取颜色

<canvas id="canvas"></canvas>

  <script>
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');

    var img = new Image();
    img.crossOrigin = 'anonymous';
    img.src = "./1.png";

    let imgData = null;
    img.onload = function () {
      canvas.width = img.width;
      canvas.height = img.height;
      context.drawImage(img, 0, 0);
      imgData = context.getImageData(0, 0, img.width, img.height).data;
      getCountsArr(imgData);

    }


    // 提取颜色
    function getCountsArr(pixelData) {

      // 分组循环
      let rgba = [];
      let rgbaStr = null;
      let colorList = {}; // 颜色值:次数 (rgbaStr: num)=> 统计颜色使用做多的

      // 颜色分组，并作统计分析使用频率
      while (pixelData.length) {
        let data = pixelData.slice(0, 4);
        let rgbaStr = data.join();

        if (!colorList[rgbaStr]) { // 不存在赋值1
          colorList[rgbaStr] = 1;
        } else { // 存在则+1
          colorList[rgbaStr] += 1;
        }

        pixelData = pixelData.slice(4);
        rgba.push(data);
      };


      // 使用颜色频率数据排序
      let oArr = [];
      for (let [key, val] of Object.entries(colorList)) {
        oArr.push({ [key]: val })
      };
      oArr.sort((a, b) => {
        return Object.values(b)[0] - Object.values(a)[0]
      });

      // 使用提取的颜色，绘制渐变图
      draw(oArr);
    };


    //  提取颜色 => 绘制canvas
    function draw(data) {
      let canvas = document.createElement('canvas');
      canvas.width = 300;
      canvas.height = 300;
      let ctx = canvas.getContext("2d");
      let gradient = ctx.createLinearGradient(0, 0, 300, 0);

      data.forEach((item, index) => {
        let color = Object.keys(item)[0];
        gradient.addColorStop(index / data.length, `rgba(${color})`);
      });

      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 300, 300);


      document.body.appendChild(canvas);
    }




  </script>