Question

我正在尝试设置一个图片库，当您点击该网页时，这些图片会逐一显示。图像显示在前面，图像的模糊版本作为背景。但我发现模糊过滤器在IE上不起作用，并在其他地方引起问题。所以我想要IE的替代品，其中背景颜色设置为主色颜色簇，最好是十六进制，我可以将其作为变量并通过javascript将其提供给CSS更改。优选地，将存在五个像素簇，并且将选择具有最高百分比的像素。我不确定如何计算这些簇，但我使用此工具在默认设置下逐个手动获取图像的颜色信息，这非常有效：

http://mkweb.bcgsc.ca/color-summarizer/?examples

我只是希望自己的javascript中有自动化功能。

我觉得Color Thief可能对我有用，但我显然只是不明白如何使用它或编写脚本来使用它我的意思。我对此很新。已编码约四天。任何帮助都将非常感激。

Answer 1

这不是我的剧本，但我找不到来源了。它返回（本地托管的）图像的主色。

  function getAverageRGBa(imgEl, a) {
      var a = a || 1;

      var blockSize = 5, // only visit every 5 pixels
          defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs
          canvas = document.createElement('canvas'),
          context = canvas.getContext && canvas.getContext('2d'),
          data, width, height,
          i = -4,
          length,
          rgb = {r:0,g:0,b:0},
          count = 0;

      if (!context) {
          return defaultRGB;
      }

      height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
      width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;

      context.drawImage(imgEl, 0, 0);

      try {
          data = context.getImageData(0, 0, width, height);
      } catch(e) {
          /* security error, img on diff domain */
          return defaultRGB;
      }

      length = data.data.length;

      while ( (i += blockSize * 4) < length ) {
          ++count;
          rgb.r += data.data[i];
          rgb.g += data.data[i+1];
          rgb.b += data.data[i+2];
      }

      // ~~ used to floor values
      rgb.r = ~~(rgb.r/count);
      rgb.g = ~~(rgb.g/count);
      rgb.b = ~~(rgb.b/count);

      return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + a + ')';
  }

编辑：可能找到了来源：https://jsfiddle.net/xLF38/

寻找纯粹的javascript图像颜色分析

1 个答案: