js+canvas获取图片主色

function getMainColor(imgUrl) {
		//imgurl 图片路径
        var img = new Image();
        img.src = imgUrl;

        img.onload = function() {
          var canvas = document.createElement("canvas");
          canvas.width = img.width;
          canvas.height = img.height;

          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0);

          var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          var pixels = imageData.data;

          var colorCounts = {};
          var maxCount = 0;
          var mainColor;

          for (var i = 0; i < pixels.length; i += 4) {
            var r = pixels[i];
            var g = pixels[i + 1];
            var b = pixels[i + 2];
            var rgb = r + "," + g + "," + b;

            if (colorCounts[rgb]) {
              colorCounts[rgb]++;
            } else {
              colorCounts[rgb] = 1;
            }

            if (colorCounts[rgb] > maxCount) {
              maxCount = colorCounts[rgb];
              mainColor = rgb;
            }
          }
          console.log(mainColor)
          return mainColor;
        };
      }

此函数会将指定的图片加载到内存中，然后使用canvas元素来提取图片的像素信息。它会遍历每个像素，并将每个像素的RGB值转换为字符串表示形式。然后，它会计算每个RGB值出现的次数，并找到出现次数最多的RGB值，以确定图片的主要颜色。