给定DIV后面的图像的平均颜色，

Question

我不知道是否有可能但是我已经尝试了很多但找不到任何东西。我想获得文本背后的图像颜色的平均值。我发现所有解决方案都找到了整个图像的平均颜色。我不想要这个。例如，我在div中有一个文本框，我只需要覆盖文本的图像的平均颜色，而不是图像的整个平均颜色。例如，这是图像

我的第一个文本框是textbox1，我只想要图像的div部分（textbox1的天空平均颜色）和textbox2（道路平均颜色）的平均颜色。

Answer 1

编辑：我回答了一个完整的例子here。

---

使用画布，您可以检索所有图像数据：

<canvas id="my_canvas" width="500" height="500"> 
  // alternative text
</canvas>

<script type="text/javascript">
  var c = document.getElementById("my_canvas");
  var ctx = c.getContext("2d");

  var image = new Image(); 
  image.src = 'image.jpg';
  image.onload = function() {
      ctx.drawImage(this,0,0);
  }

  function average_color(left, top, width, height) { // these parameters correspond to the coordinates of your box
      var imageData = ctx.getImageData(left, top, width, height);
      var mapPixel = imageData.data;

      var red = 0,
          green = 0,
          blue = 0,
          nb_pixels = width * height;
      for(var i=0;i<nb_pixels;i+=4) {
          red += mapPixel[i];
          green += mapPixel[i+1];
          blue += mapPixel[i+2];
          // mapPixel[i+3] is the component of transparency, I do not think it will be useful to you. Useless with jpg that does not support transparency.
    }
    nb_pixels = nb_pixels / 4;
    red = Math.round(red/nb_pixels);
    green = Math.round(green/nb_pixels);
    blue = Math.round(blue/nb_pixels);
    return [red,green,blue]; // components of the average color
  }
</script>

有关像素操作here的更多信息。 如果你不希望你的图像一直在画布中，你可以用javascript计算时计算canvas标签，然后删除它...

此方法的问题是画布是not supported by all browsers。这也可能导致性能问题。如果可能，请缓存计算结果。