在图像中查找特定的颜色通道/光谱

Question

我的图像如下图所示......

---＆GT;结果：#ffdf00 =＆gt;像30%

这样的东西

...我想在图像中找到特定颜色的出现(percentage)（例如#ffdf00 - yellow），或者更好的是我想找到事件{{1使用简单的javascript来表示特定颜色段落（例如(percentage)）。

我一直在寻找javascript库，但我发现直到现在提取图像的主色就像下面的插件一样：

• getImageColor

• VibrantJS

但是我确信像颜色小偷这样的东西可以完成这项工作，但我不知道如何“寻找特定的颜色光谱并获得百分比的发生”（#ffdf00 ---too---> #dabf09） ，所以我希望有人可以帮我解决我的问题。

然而，这就是我到目前为止所做的一切。现在我不知道如何继续......

#ffdf00 ---too---> #dabf09

  function draw(img) {
      var canvas = document.createElement("canvas");
      var c = canvas.getContext('2d');
      c.width = canvas.width = img.width;
      c.height = canvas.height = img.height;
      c.clearRect(0, 0, c.width, c.height);
      c.drawImage(img, 0, 0, img.width , img.height);
      return c;
  }
  
  function getColors(c) {
      var col, colors = {};
      var pixels, r, g, b, a;
      r = g = b = a = 0;
      pixels = c.getImageData(0, 0, c.width, c.height);
      for (var i = 0, data = pixels.data; i < data.length; i += 4) {
          r = data[i];
          g = data[i + 1];
          b = data[i + 2];
          a = data[i + 3];
          if (a < (255 / 2))
              continue;
          col = rgbToHex(r, g, b);
          if (!colors[col])
              colors[col] = 0;
          colors[col]++;
      }
      return colors;
  }

  function rgbToHex(r, g, b) {
      return ((r << 16) | (g << 8) | b).toString(16);
  }


  function pad(hex) {
      return ("000000" + hex).slice(-6);
  }
  var img=document.getElementById('img')
  var colors = getColors(draw(img));

提前感谢一百万，乔纳斯