创建色调直方图需要什么值?

时间:2015-08-02 13:09:02

标签: javascript d3.js

我有一大堆图片。我想为所有这些创建一个色调直方图,例如在这篇文章中:http://blog.scottlogic.com/2014/04/12/app-colour-analysis.html

这样做的最佳方式是什么,以及从我的图像集中获取的值是什么?

5 个答案:

答案 0 :(得分:2)

来自博文。

  1. 获取所有图片
  2. 对于每个图像,获取其中每个像素的色调值(因此100px×200px图像将为您提供20000个这样的色调数据点)
  3. 获取每个色调值的像素数(将有360个不同的色调值)
  4. 合并所有图片中的计数,最终会得到类似的结果
  5.   |  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>

答案 1 :(得分:1)

我会这样做:

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

答案 2 :(得分:1)

您不会说出您正在使用的平台,但我们假设它是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个通道,即HueSaturationLightness。然后删除最后两个,只留下Hue

你可以看到每个像素有一行,并且该图像中存在的两个色调是0和85.每行上的前两个字段是像素坐标,但你并不关心它。 / p>

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

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

然后您可以使用此命令将其绘制到名为result.png的PNG文件

gnuplot plot.cmd

给你这个:

enter image description here

如果您的图像很大,上面的内容会很慢,因此您可以选择以二进制方式进行,并在C中编写一个小的直方图程序。所以这会更快......

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

然后,您将拥有所有文件的第二个副本,每个文件都具有原始名称和.gray的扩展名,并且每个图像中的每个像素都有一个字节的色调信息 - 未压缩,无限制。因此,基本上cat .grayC个文件进入fgetc程序 map.setOnCameraChangeListener(new OnCameraChangeListener() { @Override public void onCameraChange(CameraPosition cameraPosition) { checkBounds(); } }); ,以读取文件夹中所有文件的所有色调值。

答案 3 :(得分:1)

我的另一个答案是从第一原则开始,并在你如何处理问题方面提供了很大的灵活性。这种方式也使用了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

enter image description here

或者,如果您想要数字并计划以不同的方式自己绘制,您可以将命令更改为:

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)

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

答案 4 :(得分:0)

该博客的作者正在使用d3.js,这对您的应用程序来说就足够了。您可以在页面上使用“view-source”查看作者使用的代码的来源(从361开始)。你可以通过观察它来弄清楚作者是如何做到的。

您可以使用此功能以及canvas的组合来获取图像的“平均颜色”。 Here是一个可以做到这一点的链接。

然而,更优雅的解决方案;将从服务器提供“平均颜色”(或您打算做的任何事情),然后将其存储在您选择的数据库中。