创建色调直方图需要哪些值？答案

【问题标题】：What are the values I need to create a hue-histogram?创建色调直方图需要哪些值？
【发布时间】：2015-08-02 13:09:02
【问题描述】：

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

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

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

来自博文。

获取所有图片
对于每个图像，获取其中每个像素的色调值（因此 100 像素 x 200 像素的图像将为您提供 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%)";
  });

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

【讨论】：

感谢您的帮助。我设法从图像中获取 RGB 值，但不是 H。我使用 colorsys.rgb_to_hsv 它给了我 0.16666 的“色调”...为什么？
@vandernath 如果这是转换为 HSV 时颜色的色调值，为什么它不会给你一个 0.16666 的“色调”？
@diemaus true--虽然我尝试使用更多像素，但似乎我总是得到一个介于 0 和 1 之间而不是 0 和 360 之间的值。
@vandernath - colorsys.rgb_to_hsv 返回 0 到 1 之间的值。只需缩放 0 = 0 和 1 = 360.. 0.5 = 180...
感谢@potatopeelings。我已经这样做了，它返回了值，但它总是 60、180、300 ......从来没有像 40、70、20、10 这样的东西。我听说色调值只是角度，但我怎么得到更精确的值，如 1、2、3...？我没有在 SO 上找到任何东西。

【解决方案2】：

我会按照以下步骤进行：

编写一个命令行脚本，使用 ImageMagick 从图像中提取最常用的颜色：convert forr.jpg -colors 1 -unique-colors txt:-
将输出解析为您喜欢的格式，并创建一个包含每行颜色的简单文件。（为方便起见，您可以生成 JSON）
将数据集简化为调色板。有很多方法可以做到这一点，例如看看这个问题：Algorithm or library for color quantization/reduced image color palette in Javascript?
一旦确定了所需分布中的颜色，就可以轻松地根据您的选择绘制图表。

【讨论】：

【解决方案3】：

您没有说明您使用的是什么平台，但我们假设它是 OSX 或 Linux - 如果需要，您可以根据 Windows 进行调整。

首先，我会使用 ImageMagick 来获取图像中的色调，如下所示：

convert image.png -colorspace hsl -separate -delete 1,2 -depth 8 txt: | more

# ImageMagick pixel enumeration: 360,40,255,gray
0,0: (0,0,0)  #000000  gray(0)
1,0: (0,0,0)  #000000  gray(0)
2,0: (0,0,0)  #000000  gray(0)
3,0: (0,0,0)  #000000  gray(0)
4,0: (0,0,0)  #000000  gray(0)
5,0: (0,0,0)  #000000  gray(0)
6,0: (0,0,0)  #000000  gray(0)
...
...
42,0: (0,0,0)  #000000  gray(0)
43,0: (0,0,0)  #000000  gray(0)
44,0: (0,0,0)  #000000  gray(0)
45,0: (85,85,85)  #555555  gray(85)
46,0: (85,85,85)  #555555  gray(85)
47,0: (85,85,85)  #555555  gray(85)
48,0: (85,85,85)  #555555  gray(85)
49,0: (85,85,85)  #555555  gray(85)
50,0: (85,85,85)  #555555  gray(85)
51,0: (85,85,85)  #555555  gray(85)
52,0: (85,85,85)  #555555  gray(85)
53,0: (85,85,85)  #555555  gray(85)

该命令将图像转换为HSL色彩空间并将其分成3个通道，即Hue、Saturation和Lightness。然后它会删除最后两个，只留下Hue。

您可以看到每个像素有一条线，并且该图像中存在的两种色调是 0 和 85。每条线上的前两个字段是像素坐标，但您不必关心它。

现在，您可以像这样对文件夹中的所有图像执行此操作

for f in *.png; do
   convert "$f" -colorspace hsl -separate -delete 1,2 -depth 8 txt:
done

通过grep 过滤掉所有的坐标、括号和十六进制垃圾，像这样：

for f in *.png; do
   convert "$f" -colorspace hsl -separate -delete 1,2 -depth 8 txt:
done | grep -Po "(?<=\()(\d+)(?=\))"
0
0
0
...
85
85 
85

然后通过awk 来汇总各种色调，如下所示：

... grep -Po ...  | awk '
   BEGIN{for(i=0;i<=255;i++)hist[i]=0}
   {hist[$1]++}
   END{for(i=0;i<=255;i++)print i,hist[i]}'



0 1985
1 3957
2 3857
3 3958
4 3951
5 3737
6 3842
7 3925
8 3838
...
...
253 3842
254 4035
255 1945

然后使用gnuplot 进行绘图。因此，如果您将 prvious 命令的输出重定向到名为 hist.dat 的文件，并将以下 gnuplot 命令保存到名为 plot.cmd 的文件中

set terminal png size 1000,1000
set output 'result.png'
set style fill solid
set title "Hue Histogram"
set xlabel "Hue"
set ylabel "Frequency"
set xrange [0:255]
plot "hist.dat" using 2 with boxes

然后您可以使用此命令将其绘制为名为@987654339@ 的 PNG 文件

gnuplot plot.cmd

给你这个：

如果你的图像很大，上面会很慢，所以你可以选择用二进制来做，在C写一个小的直方图程序。所以这会更快...

for f in *.png; do
   convert "$f" -colorspace hsl -separate -delete 1,2 -depth 8 gray:"$f.gray"
done

然后，您将获得所有文件的第二份副本，每个文件的原始名称和扩展名为 .gray，并且每个图像中的每个像素都有一个单字节的色调信息 - 未压缩、未定界。因此，您基本上可以将所有.gray 文件cat 放入一个C 程序中，该程序执行fgetc 以读取文件夹中所有文件的所有色调值。

【讨论】：

【解决方案4】：

我的另一个答案是从第一原则出发的，并且在您处理问题的方式上提供了很大的灵活性。这种方式也使用 ImageMagick，但有点切入正题更直接...

因此，我们像以前一样循环遍历您目录中的所有图像，并将每个图像转换为HSL，然后丢弃饱和度和亮度。将剩余的Hue 通道传递给 MIFF（多图像文件格式）并将所有图像整理成一个大图像，然后让 ImageMagick 自己生成直方图...

for f in *.png; do
   convert "$f" -colorspace hsl -separate -delete 1,2 -depth 8 miff:-
done | convert -background none - +append -define histogram:unique-colors=true histogram:gif:result.gif

或者，如果您想要这些数字并计划以不同的方式自己绘制它们，您可以将命令更改为：

for f in *.png; do 
   convert "$f" -colorspace hsl -separate -delete 1,2 -depth 8 miff:-
done | convert -background none - +append -define histogram:unique-colors=true -format %c histogram:info:

2000020: (  0,  0,  0,255) #000000FF graya(0,1)
  90000: (  0,  0,  0,  0) #00000000 graya(0,0)
    34: (  1,  1,  1,255) #010101FF graya(1,1)
    45: (  2,  2,  2,255) #020202FF graya(2,1)
    36: (  3,  3,  3,255) #030303FF graya(3,1)
    46: (  4,  4,  4,255) #040404FF graya(4,1)
    35: (  5,  5,  5,255) #050505FF graya(5,1)
    47: (  6,  6,  6,255) #060606FF graya(6,1)
    36: (  7,  7,  7,255) #070707FF graya(7,1)
    35: (  8,  8,  8,255) #080808FF graya(8,1)
    47: (  9,  9,  9,255) #090909FF graya(9,1)
    42: ( 10, 10, 10,255) #0A0A0AFF graya(10,1)
    42: ( 11, 11, 11,255) #0B0B0BFF graya(11,1)
    37: ( 12, 12, 12,255) #0C0C0CFF graya(12,1)
    32: ( 13, 13, 13,255) #0D0D0DFF graya(13,1)
    55: ( 14, 14, 14,255) #0E0E0EFF graya(14,1)
    43: ( 15, 15, 15,255) #0F0F0FFF graya(15,1)
    44: ( 16, 16, 16,255) #101010FF graya(16,1)
    40: ( 17, 17, 17,255) #111111FF graya(17,1)
    36: ( 18, 18, 18,255) #121212FF graya(18,1)
    35: ( 19, 19, 19,255) #131313FF graya(19,1)
    53: ( 20, 20, 20,255) #141414FF graya(20,1)
    40: ( 21, 21, 21,255) #151515FF graya(21,1)
    33: ( 22, 22, 22,255) #161616FF graya(22,1)
    55: ( 23, 23, 23,255) #171717FF graya(23,1)
    53: ( 24, 24, 24,255) #181818FF graya(24,1)
    42: ( 25, 25, 25,255) #191919FF graya(25,1)
    42: ( 26, 26, 26,255) #1A1A1AFF graya(26,1)
    52: ( 27, 27, 27,255) #1B1B1BFF graya(27,1)
    38: ( 28, 28, 28,255) #1C1C1CFF graya(28,1)
    43: ( 29, 29, 29,255) #1D1D1DFF graya(29,1)
    47: ( 30, 30, 30,255) #1E1E1EFF graya(30,1)
    43: ( 31, 31, 31,255) #1F1F1FFF graya(31,1)
    46: ( 32, 32, 32,255) #202020FF graya(32,1)
    40: ( 33, 33, 33,255) #212121FF graya(33,1)
    33: ( 34, 34, 34,255) #222222FF graya(34,1)
    42: ( 35, 35, 35,255) #232323FF graya(35,1)
    34: ( 36, 36, 36,255) #242424FF graya(36,1)
    32: ( 37, 37, 37,255) #252525FF graya(37,1)
    36: ( 38, 38, 38,255) #262626FF graya(38,1)
    32: ( 39, 39, 39,255) #272727FF graya(39,1)
    24: ( 40, 40, 40,255) #282828FF graya(40,1)
    38: ( 41, 41, 41,255) #292929FF graya(41,1)
    34: ( 42, 42, 42,255) #2A2A2AFF graya(42,1)
    28: ( 43, 43, 43,255) #2B2B2BFF graya(43,1)
    22: ( 44, 44, 44,255) #2C2C2CFF graya(44,1)
    37: ( 45, 45, 45,255) #2D2D2DFF graya(45,1)
    29: ( 46, 46, 46,255) #2E2E2EFF graya(46,1)
    40: ( 47, 47, 47,255) #2F2F2FFF graya(47,1)
    34: ( 48, 48, 48,255) #303030FF graya(48,1)
    44: ( 49, 49, 49,255) #313131FF graya(49,1)
    37: ( 50, 50, 50,255) #323232FF graya(50,1)
    45: ( 51, 51, 51,255) #333333FF graya(51,1)
    43: ( 52, 52, 52,255) #343434FF graya(52,1)
    30: ( 53, 53, 53,255) #353535FF graya(53,1)
    30: ( 54, 54, 54,255) #363636FF graya(54,1)
    46: ( 55, 55, 55,255) #373737FF graya(55,1)
    46: ( 56, 56, 56,255) #383838FF graya(56,1)
    42: ( 57, 57, 57,255) #393939FF graya(57,1)
    50: ( 58, 58, 58,255) #3A3A3AFF graya(58,1)
    34: ( 59, 59, 59,255) #3B3B3BFF graya(59,1)
    36: ( 60, 60, 60,255) #3C3C3CFF graya(60,1)
    38: ( 61, 61, 61,255) #3D3D3DFF graya(61,1)
    45: ( 62, 62, 62,255) #3E3E3EFF graya(62,1)
    43: ( 63, 63, 63,255) #3F3F3FFF graya(63,1)
    46: ( 64, 64, 64,255) #404040FF graya(64,1)
    36: ( 65, 65, 65,255) #414141FF graya(65,1)
    42: ( 66, 66, 66,255) #424242FF graya(66,1)
    38: ( 67, 67, 67,255) #434343FF graya(67,1)
    48: ( 68, 68, 68,255) #444444FF graya(68,1)
    49: ( 69, 69, 69,255) #454545FF graya(69,1)
    55: ( 70, 70, 70,255) #464646FF graya(70,1)
    34: ( 71, 71, 71,255) #474747FF graya(71,1)
    50: ( 72, 72, 72,255) #484848FF graya(72,1)
    35: ( 73, 73, 73,255) #494949FF graya(73,1)
    30: ( 74, 74, 74,255) #4A4A4AFF graya(74,1)
    33: ( 75, 75, 75,255) #4B4B4BFF graya(75,1)
    43: ( 76, 76, 76,255) #4C4C4CFF graya(76,1)
    46: ( 77, 77, 77,255) #4D4D4DFF graya(77,1)
    31: ( 78, 78, 78,255) #4E4E4EFF graya(78,1)
    39: ( 79, 79, 79,255) #4F4F4FFF graya(79,1)
    34: ( 80, 80, 80,255) #505050FF graya(80,1)
    41: ( 81, 81, 81,255) #515151FF graya(81,1)
    30: ( 82, 82, 82,255) #525252FF graya(82,1)
    29: ( 83, 83, 83,255) #535353FF graya(83,1)
    31: ( 84, 84, 84,255) #545454FF graya(84,1)
    35: ( 85, 85, 85,255) #555555FF graya(85,1)
    24: ( 86, 86, 86,255) #565656FF graya(86,1)
    37: ( 87, 87, 87,255) #575757FF graya(87,1)
    32: ( 88, 88, 88,255) #585858FF graya(88,1)
    26: ( 89, 89, 89,255) #595959FF graya(89,1)
    40: ( 90, 90, 90,255) #5A5A5AFF graya(90,1)
    35: ( 91, 91, 91,255) #5B5B5BFF graya(91,1)
    37: ( 92, 92, 92,255) #5C5C5CFF graya(92,1)
    39: ( 93, 93, 93,255) #5D5D5DFF graya(93,1)
    43: ( 94, 94, 94,255) #5E5E5EFF graya(94,1)
    38: ( 95, 95, 95,255) #5F5F5FFF graya(95,1)
    45: ( 96, 96, 96,255) #606060FF graya(96,1)
    37: ( 97, 97, 97,255) #616161FF graya(97,1)
    47: ( 98, 98, 98,255) #626262FF graya(98,1)
    35: ( 99, 99, 99,255) #636363FF graya(99,1)
    47: (100,100,100,255) #646464FF graya(100,1)
    36: (101,101,101,255) #656565FF graya(101,1)
    41: (102,102,102,255) #666666FF graya(102,1)
    39: (103,103,103,255) #676767FF graya(103,1)
    42: (104,104,104,255) #686868FF graya(104,1)
    55: (105,105,105,255) #696969FF graya(105,1)
    41: (106,106,106,255) #6A6A6AFF graya(106,1)
    35: (107,107,107,255) #6B6B6BFF graya(107,1)
    42: (108,108,108,255) #6C6C6CFF graya(108,1)
    33: (109,109,109,255) #6D6D6DFF graya(109,1)
    30: (110,110,110,255) #6E6E6EFF graya(110,1)
    43: (111,111,111,255) #6F6F6FFF graya(111,1)
    37: (112,112,112,255) #707070FF graya(112,1)
    48: (113,113,113,255) #717171FF graya(113,1)
    32: (114,114,114,255) #727272FF graya(114,1)
    43: (115,115,115,255) #737373FF graya(115,1)
    41: (116,116,116,255) #747474FF graya(116,1)
    49: (117,117,117,255) #757575FF graya(117,1)
    46: (118,118,118,255) #767676FF graya(118,1)
    37: (119,119,119,255) #777777FF graya(119,1)
    35: (120,120,120,255) #787878FF graya(120,1)
    38: (121,121,121,255) #797979FF graya(121,1)
    39: (122,122,122,255) #7A7A7AFF graya(122,1)
    36: (123,123,123,255) #7B7B7BFF graya(123,1)
    32: (124,124,124,255) #7C7C7CFF graya(124,1)
    29: (125,125,125,255) #7D7D7DFF graya(125,1)
    36: (126,126,126,255) #7E7E7EFF graya(126,1)
    33: (127,127,127,255) #7F7F7FFF graya(127,1)
    30: (128,128,128,255) #808080FF graya(128,1)
    29: (129,129,129,255) #818181FF graya(129,1)
    34: (130,130,130,255) #828282FF graya(130,1)
    33: (131,131,131,255) #838383FF graya(131,1)
    44: (132,132,132,255) #848484FF graya(132,1)
    34: (133,133,133,255) #858585FF graya(133,1)
    39: (134,134,134,255) #868686FF graya(134,1)
    36: (135,135,135,255) #878787FF graya(135,1)
    54: (136,136,136,255) #888888FF graya(136,1)
    41: (137,137,137,255) #898989FF graya(137,1)
    45: (138,138,138,255) #8A8A8AFF graya(138,1)
    43: (139,139,139,255) #8B8B8BFF graya(139,1)
    33: (140,140,140,255) #8C8C8CFF graya(140,1)
    41: (141,141,141,255) #8D8D8DFF graya(141,1)
    50: (142,142,142,255) #8E8E8EFF graya(142,1)
    46: (143,143,143,255) #8F8F8FFF graya(143,1)
    38: (144,144,144,255) #909090FF graya(144,1)
    36: (145,145,145,255) #919191FF graya(145,1)
    42: (146,146,146,255) #929292FF graya(146,1)
    45: (147,147,147,255) #939393FF graya(147,1)
    46: (148,148,148,255) #949494FF graya(148,1)
    35: (149,149,149,255) #959595FF graya(149,1)
    47: (150,150,150,255) #969696FF graya(150,1)
    42: (151,151,151,255) #979797FF graya(151,1)
    53: (152,152,152,255) #989898FF graya(152,1)
    35: (153,153,153,255) #999999FF graya(153,1)
    47: (154,154,154,255) #9A9A9AFF graya(154,1)
    43: (155,155,155,255) #9B9B9BFF graya(155,1)
    37: (156,156,156,255) #9C9C9CFF graya(156,1)
    44: (157,157,157,255) #9D9D9DFF graya(157,1)
    51: (158,158,158,255) #9E9E9EFF graya(158,1)
    39: (159,159,159,255) #9F9F9FFF graya(159,1)
    31: (160,160,160,255) #A0A0A0FF graya(160,1)
    45: (161,161,161,255) #A1A1A1FF graya(161,1)
    37: (162,162,162,255) #A2A2A2FF graya(162,1)
    38: (163,163,163,255) #A3A3A3FF graya(163,1)
    28: (164,164,164,255) #A4A4A4FF graya(164,1)
    30: (165,165,165,255) #A5A5A5FF graya(165,1)
    43: (166,166,166,255) #A6A6A6FF graya(166,1)
    28: (167,167,167,255) #A7A7A7FF graya(167,1)
    47: (168,168,168,255) #A8A8A8FF graya(168,1)
    32: (169,169,169,255) #A9A9A9FF graya(169,1)
    37: (170,170,170,255) #AAAAAAFF graya(170,1)
    33: (171,171,171,255) #ABABABFF graya(171,1)
    21: (172,172,172,255) #ACACACFF graya(172,1)
    32: (173,173,173,255) #ADADADFF graya(173,1)
    38: (174,174,174,255) #AEAEAEFF graya(174,1)
    53: (175,175,175,255) #AFAFAFFF graya(175,1)
    33: (176,176,176,255) #B0B0B0FF graya(176,1)
    40: (177,177,177,255) #B1B1B1FF graya(177,1)
    26: (178,178,178,255) #B2B2B2FF graya(178,1)
    35: (179,179,179,255) #B3B3B3FF graya(179,1)
    43: (180,180,180,255) #B4B4B4FF graya(180,1)
    43: (181,181,181,255) #B5B5B5FF graya(181,1)
    40: (182,182,182,255) #B6B6B6FF graya(182,1)
    35: (183,183,183,255) #B7B7B7FF graya(183,1)
    37: (184,184,184,255) #B8B8B8FF graya(184,1)
    38: (185,185,185,255) #B9B9B9FF graya(185,1)
    37: (186,186,186,255) #BABABAFF graya(186,1)
    44: (187,187,187,255) #BBBBBBFF graya(187,1)
    47: (188,188,188,255) #BCBCBCFF graya(188,1)
    34: (189,189,189,255) #BDBDBDFF graya(189,1)
    41: (190,190,190,255) #BEBEBEFF graya(190,1)
    52: (191,191,191,255) #BFBFBFFF graya(191,1)
    35: (192,192,192,255) #C0C0C0FF graya(192,1)
    43: (193,193,193,255) #C1C1C1FF graya(193,1)
    48: (194,194,194,255) #C2C2C2FF graya(194,1)
    46: (195,195,195,255) #C3C3C3FF graya(195,1)
    40: (196,196,196,255) #C4C4C4FF graya(196,1)
    34: (197,197,197,255) #C5C5C5FF graya(197,1)
    42: (198,198,198,255) #C6C6C6FF graya(198,1)
    38: (199,199,199,255) #C7C7C7FF graya(199,1)
    41: (200,200,200,255) #C8C8C8FF graya(200,1)
    45: (201,201,201,255) #C9C9C9FF graya(201,1)
    42: (202,202,202,255) #CACACAFF graya(202,1)
    41: (203,203,203,255) #CBCBCBFF graya(203,1)
    36: (204,204,204,255) #CCCCCCFF graya(204,1)
    34: (205,205,205,255) #CDCDCDFF graya(205,1)
    36: (206,206,206,255) #CECECEFF graya(206,1)
    38: (207,207,207,255) #CFCFCFFF graya(207,1)
    28: (208,208,208,255) #D0D0D0FF graya(208,1)
    40: (209,209,209,255) #D1D1D1FF graya(209,1)
    34: (210,210,210,255) #D2D2D2FF graya(210,1)
    22: (211,211,211,255) #D3D3D3FF graya(211,1)
    26: (212,212,212,255) #D4D4D4FF graya(212,1)
    34: (213,213,213,255) #D5D5D5FF graya(213,1)
    46: (214,214,214,255) #D6D6D6FF graya(214,1)
    35: (215,215,215,255) #D7D7D7FF graya(215,1)
    31: (216,216,216,255) #D8D8D8FF graya(216,1)
    32: (217,217,217,255) #D9D9D9FF graya(217,1)
    35: (218,218,218,255) #DADADAFF graya(218,1)
    37: (219,219,219,255) #DBDBDBFF graya(219,1)
    32: (220,220,220,255) #DCDCDCFF graya(220,1)
    41: (221,221,221,255) #DDDDDDFF graya(221,1)
    43: (222,222,222,255) #DEDEDEFF graya(222,1)
    51: (223,223,223,255) #DFDFDFFF graya(223,1)
    45: (224,224,224,255) #E0E0E0FF graya(224,1)
    35: (225,225,225,255) #E1E1E1FF graya(225,1)
    47: (226,226,226,255) #E2E2E2FF graya(226,1)
    37: (227,227,227,255) #E3E3E3FF graya(227,1)
    41: (228,228,228,255) #E4E4E4FF graya(228,1)
    47: (229,229,229,255) #E5E5E5FF graya(229,1)
    51: (230,230,230,255) #E6E6E6FF graya(230,1)
    48: (231,231,231,255) #E7E7E7FF graya(231,1)
    51: (232,232,232,255) #E8E8E8FF graya(232,1)
    49: (233,233,233,255) #E9E9E9FF graya(233,1)
    38: (234,234,234,255) #EAEAEAFF graya(234,1)
    55: (235,235,235,255) #EBEBEBFF graya(235,1)
    26: (236,236,236,255) #ECECECFF graya(236,1)
    50: (237,237,237,255) #EDEDEDFF graya(237,1)
    48: (238,238,238,255) #EEEEEEFF graya(238,1)
    39: (239,239,239,255) #EFEFEFFF graya(239,1)
    45: (240,240,240,255) #F0F0F0FF graya(240,1)
    38: (241,241,241,255) #F1F1F1FF graya(241,1)
    47: (242,242,242,255) #F2F2F2FF graya(242,1)
    40: (243,243,243,255) #F3F3F3FF graya(243,1)
    41: (244,244,244,255) #F4F4F4FF graya(244,1)
    47: (245,245,245,255) #F5F5F5FF graya(245,1)
    30: (246,246,246,255) #F6F6F6FF graya(246,1)
    36: (247,247,247,255) #F7F7F7FF graya(247,1)
    40: (248,248,248,255) #F8F8F8FF graya(248,1)
    36: (249,249,249,255) #F9F9F9FF graya(249,1)
    34: (250,250,250,255) #FAFAFAFF graya(250,1)
    37: (251,251,251,255) #FBFBFBFF graya(251,1)
    31: (252,252,252,255) #FCFCFCFF graya(252,1)
    37: (253,253,253,255) #FDFDFDFF graya(253,1)
    34: (254,254,254,255) #FEFEFEFF graya(254,1)
    21: (255,255,255,255) #FFFFFFFF graya(255,1)

所以第一列现在是像素数，其余的告诉你像素的色调。

【讨论】：

【解决方案5】：

博客作者使用d3.js，这对您的应用程序来说已经足够了。您可以通过页面上的“view-source”查看作者使用的代码的源代码（从361行开始）。通过查看，您可能会弄清楚作者是如何做到的。

您可以使用它以及canvas 的组合来获得图像的“平均颜色”。 Here 是一个这样做的链接。

然而，一个更优雅的解决方案；将从服务器提供“平均颜色”（或您计划执行的任何操作），然后可以将其存储在您选择的数据库中。

【讨论】：

谢谢！我有很多图像，但我认为我不能从服务器上提供它们。我仍然不知道从哪里开始，因为我从未使用过 D3.js。你能给我一个更具体的解释吗？我打算做的是为我的一组图像创建一个类似于上面的直方图。
与任何类型的“图表”一样，您需要获取一些数据。收集这些值的“最佳”方法是使用存储这些值的数据库，除非您这样做只是为了开怀大笑。如果你是;那么您可以将其存储为一个 json 文件（或类似文件），然后通过 AJAX 获取它（例如，如果您使用的是 jQuery，则使用 $.get）。 @potatopeelings 给出了很好的介绍和指导。试着自己去想办法——当你真正确实想办法的时候，这种感觉真是太棒了！ :)