javascript - 创建色相直方图需要什么值？

我有大量的图像。我想为所有这些对象创建一个色调直方图，就像这篇文章：http://blog.scottlogic.com/2014/04/12/app-colour-analysis.html

最好的方法是什么，我需要从一组图像中获得什么值？

最佳答案

来自博客文章。


获取所有图像
对于每个图像，获取其中每个像素的色相值（因此，一个100px x 200px的图像将为您提供20000个此类色相数据点）
获取每个色相值的像素数（将有360个不同的色相值）
合并所有图像的计数，最终会得到类似的结果

  |  Hue  |  Count of pixels with this hue value across all images |
  ------------------------------------------------------------------
  |   0   |  xxxxxx                                                |
  |   1   |  yyyyyy                                                |
  ....
  |  360  |  zzzzzz                                                |

画一个圆，给每个径向线一个长度=第二列的缩放值（使用d3.scale）和对应于色相的颜色（可以使用d3.hsl）

从数据的角度来看，您将必须弄清楚如何从图像中获取H值。一个很好的起点是How to generate a HSL or HSI Histogram from a normal Image?



这是生成圆的一种方法（一旦有了数据）

// sample data - the index indicates the Hue value (0 - 360) and the value is the number of pixels
var data = []
for (var i = 0; i <= 360; i++)
    data.push(parseInt(Math.random() * 5000));


// size of the canvas
var size = 500;
// how much big do you want the inner circle to be 100% = no bars!
var innerCirclePercentage = 0.2;

var innerCircleRatio = 0.5 + innerCirclePercentage / 2;
var scale = d3.scale.linear().domain([0, d3.max(data)]).range([size * innerCircleRatio, size]);

var svgContainer = d3.select("body").append("svg")
  .attr("width", size)
  .attr("height", size);
var lines = svgContainer
  .selectAll(".line")
  .data(data);

lines.enter()
  .append("line")
  .attr("class", "line")
  .attr("x1", size * 0.5)
  .attr("y1", size * innerCircleRatio)
  .attr("x2", size * 0.5)
  .attr("y2", function(d, i) {
    return scale(d);
  })
  .attr("transform", function(d, i) {
    return "rotate(" + i + ", " + size * 0.5 + ", " + size * 0.5 + ")"
  })
  .style("stroke-width", 5)
  .style("stroke", function(d, i) {
    return "hsl(" + i + ", 80%, 50%)";
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>