PHP / imagecolorat：在 RGB 中转换颜色但缺少颜色答案

【问题标题】：PHP / imagecolorat : transform colors in RGB but missing colorsPHP / imagecolorat：在 RGB 中转换颜色但缺少颜色
【发布时间】：2021-04-21 19:06:34
【问题描述】：

我正在尝试创建一个从 JPG、PNG、... 生成直方图的脚本我可以使用 imagecolorat 逐个像素地获取所有颜色，但如果我想在 CSS 中显示它们，我需要将它们转换为 RGB。

我使用了以下脚本，该脚本可在许多网站上找到：

$r = ($a >> 16) & 0xFF;
$g = ($a >> 8) & 0xFF;
$b = $a & 0xFF;     
$v = round(($r + $g + $b) / 3);

因为我想在直方图下显示相应的颜色，所以我做了以下操作：

$mapping = array();
for ($a=0;$a<=16777215;$a++)
{
    $r = ($a >> 16) & 0xFF;
    $g = ($a >> 8) & 0xFF;
    $b = $a & 0xFF;     
    $v = round(($r + $g + $b) / 3);
    
    $mapping[$v] = $r.",".$g.",".$b;    
}

这个数组的输出如下：

Array
(
    [0] => 1,0,0
    [1] => 4,0,0
    [2] => 7,0,0
    [3] => 10,0,0
    [4] => 13,0,0
    [5] => 16,0,0
    [6] => 19,0,0
    [7] => 22,0,0
    [8] => 25,0,0
    [9] => 28,0,0
    [10] => 31,0,0
    [11] => 34,0,0
    [12] => 37,0,0
    [13] => 40,0,0
    [14] => 43,0,0
    [15] => 46,0,0
    [16] => 49,0,0
    [17] => 52,0,0
    [18] => 55,0,0
    [19] => 58,0,0
    [20] => 61,0,0
    [21] => 64,0,0
    [22] => 67,0,0
    [23] => 70,0,0
    [24] => 73,0,0
    [25] => 76,0,0
    [26] => 79,0,0
    [27] => 82,0,0
    [28] => 85,0,0
    [29] => 88,0,0
    [30] => 91,0,0
    [31] => 94,0,0
    [32] => 97,0,0
    [33] => 100,0,0
    [34] => 103,0,0
    [35] => 106,0,0
    [36] => 109,0,0
    [37] => 112,0,0
    [38] => 115,0,0
    [39] => 118,0,0
    [40] => 121,0,0
    [41] => 124,0,0
    [42] => 127,0,0
    [43] => 130,0,0
    [44] => 133,0,0
    [45] => 136,0,0
    [46] => 139,0,0
    [47] => 142,0,0
    [48] => 145,0,0
    [49] => 148,0,0
    [50] => 151,0,0
    [51] => 154,0,0
    [52] => 157,0,0
    [53] => 160,0,0
    [54] => 163,0,0
    [55] => 166,0,0
    [56] => 169,0,0
    [57] => 172,0,0
    [58] => 175,0,0
    [59] => 178,0,0
    [60] => 181,0,0
    [61] => 184,0,0
    [62] => 187,0,0
    [63] => 190,0,0
    [64] => 193,0,0
    [65] => 196,0,0
    [66] => 199,0,0
    [67] => 202,0,0
    [68] => 205,0,0
    [69] => 208,0,0
    [70] => 211,0,0
    [71] => 214,0,0
    [72] => 217,0,0
    [73] => 220,0,0
    [74] => 223,0,0
    [75] => 226,0,0
    [76] => 229,0,0
    [77] => 232,0,0
    [78] => 235,0,0
    [79] => 238,0,0
    [80] => 241,0,0
    [81] => 244,0,0
    [82] => 247,0,0
    [83] => 250,0,0
    [84] => 253,0,0
    [85] => 255,1,0
    [86] => 255,4,0
    [87] => 255,7,0
    [88] => 255,10,0
    [89] => 255,13,0
    [90] => 255,16,0
    [91] => 255,19,0
    [92] => 255,22,0
    [93] => 255,25,0
    [94] => 255,28,0
    [95] => 255,31,0
    [96] => 255,34,0
    [97] => 255,37,0
    [98] => 255,40,0
    [99] => 255,43,0
    [100] => 255,46,0
    [101] => 255,49,0
    [102] => 255,52,0
    [103] => 255,55,0
    [104] => 255,58,0
    [105] => 255,61,0
    [106] => 255,64,0
    [107] => 255,67,0
    [108] => 255,70,0
    [109] => 255,73,0
    [110] => 255,76,0
    [111] => 255,79,0
    [112] => 255,82,0
    [113] => 255,85,0
    [114] => 255,88,0
    [115] => 255,91,0
    [116] => 255,94,0
    [117] => 255,97,0
    [118] => 255,100,0
    [119] => 255,103,0
    [120] => 255,106,0
    [121] => 255,109,0
    [122] => 255,112,0
    [123] => 255,115,0
    [124] => 255,118,0
    [125] => 255,121,0
    [126] => 255,124,0
    [127] => 255,127,0
    [128] => 255,130,0
    [129] => 255,133,0
    [130] => 255,136,0
    [131] => 255,139,0
    [132] => 255,142,0
    [133] => 255,145,0
    [134] => 255,148,0
    [135] => 255,151,0
    [136] => 255,154,0
    [137] => 255,157,0
    [138] => 255,160,0
    [139] => 255,163,0
    [140] => 255,166,0
    [141] => 255,169,0
    [142] => 255,172,0
    [143] => 255,175,0
    [144] => 255,178,0
    [145] => 255,181,0
    [146] => 255,184,0
    [147] => 255,187,0
    [148] => 255,190,0
    [149] => 255,193,0
    [150] => 255,196,0
    [151] => 255,199,0
    [152] => 255,202,0
    [153] => 255,205,0
    [154] => 255,208,0
    [155] => 255,211,0
    [156] => 255,214,0
    [157] => 255,217,0
    [158] => 255,220,0
    [159] => 255,223,0
    [160] => 255,226,0
    [161] => 255,229,0
    [162] => 255,232,0
    [163] => 255,235,0
    [164] => 255,238,0
    [165] => 255,241,0
    [166] => 255,244,0
    [167] => 255,247,0
    [168] => 255,250,0
    [169] => 255,253,0
    [170] => 255,255,1
    [171] => 255,255,4
    [172] => 255,255,7
    [173] => 255,255,10
    [174] => 255,255,13
    [175] => 255,255,16
    [176] => 255,255,19
    [177] => 255,255,22
    [178] => 255,255,25
    [179] => 255,255,28
    [180] => 255,255,31
    [181] => 255,255,34
    [182] => 255,255,37
    [183] => 255,255,40
    [184] => 255,255,43
    [185] => 255,255,46
    [186] => 255,255,49
    [187] => 255,255,52
    [188] => 255,255,55
    [189] => 255,255,58
    [190] => 255,255,61
    [191] => 255,255,64
    [192] => 255,255,67
    [193] => 255,255,70
    [194] => 255,255,73
    [195] => 255,255,76
    [196] => 255,255,79
    [197] => 255,255,82
    [198] => 255,255,85
    [199] => 255,255,88
    [200] => 255,255,91
    [201] => 255,255,94
    [202] => 255,255,97
    [203] => 255,255,100
    [204] => 255,255,103
    [205] => 255,255,106
    [206] => 255,255,109
    [207] => 255,255,112
    [208] => 255,255,115
    [209] => 255,255,118
    [210] => 255,255,121
    [211] => 255,255,124
    [212] => 255,255,127
    [213] => 255,255,130
    [214] => 255,255,133
    [215] => 255,255,136
    [216] => 255,255,139
    [217] => 255,255,142
    [218] => 255,255,145
    [219] => 255,255,148
    [220] => 255,255,151
    [221] => 255,255,154
    [222] => 255,255,157
    [223] => 255,255,160
    [224] => 255,255,163
    [225] => 255,255,166
    [226] => 255,255,169
    [227] => 255,255,172
    [228] => 255,255,175
    [229] => 255,255,178
    [230] => 255,255,181
    [231] => 255,255,184
    [232] => 255,255,187
    [233] => 255,255,190
    [234] => 255,255,193
    [235] => 255,255,196
    [236] => 255,255,199
    [237] => 255,255,202
    [238] => 255,255,205
    [239] => 255,255,208
    [240] => 255,255,211
    [241] => 255,255,214
    [242] => 255,255,217
    [243] => 255,255,220
    [244] => 255,255,223
    [245] => 255,255,226
    [246] => 255,255,229
    [247] => 255,255,232
    [248] => 255,255,235
    [249] => 255,255,238
    [250] => 255,255,241
    [251] => 255,255,244
    [252] => 255,255,247
    [253] => 255,255,250
    [254] => 255,255,253
    [255] => 255,255,255
)

如您所见，这里已经出现了一些错误，因为缺少一大堆颜色。

如果我显示这些颜色，我会得到：

我从假设 imagecolorat 的最大值为 16777215 开始。我通过询问白色像素的颜色索引得到该值。我错了吗？

您知道如何为直方图设置更准确的颜色数组吗？

谢谢

蓝色和绿色完全消失了。

【问题讨论】：

标签： php

【解决方案1】：

您可以为 3 种颜色（红、绿、蓝）创建一个循环，以获得更多不同的颜色。

在以下示例中，您将获得黑色、红色、绿色、蓝色、白色（以及许多其他颜色）。

代码：(demo)

$ndiv = 5; // small => less colors ; big => more colors
$div = 255 / $ndiv;

$mapping = [];
for ($r = 0; $r <= 255; $r += $div) {
  for ($g = 0; $g <= 255; $g += $div) {
    for ($b = 0; $b <= 255; $b += $div) {
      $mapping[] = sprintf("%d,%d,%d", $r, $g, $b);    
    }
  }
}

print_r($mapping);

输出：

Array
(
    [0] => 0,0,0
    [1] => 0,0,51
    [2] => 0,0,102
    [3] => 0,0,153
    [4] => 0,0,204
    [5] => 0,0,255
    [6] => 0,51,0
    [7] => 0,51,51
    [8] => 0,51,102
    [9] => 0,51,153
    [10] => 0,51,204
    [11] => 0,51,255
    [12] => 0,102,0
    [13] => 0,102,51
    [14] => 0,102,102
    [15] => 0,102,153
    [16] => 0,102,204
    [17] => 0,102,255
    [18] => 0,153,0
    [19] => 0,153,51
    [20] => 0,153,102
    [21] => 0,153,153
    [22] => 0,153,204
    [23] => 0,153,255
    [24] => 0,204,0
    [25] => 0,204,51
    [26] => 0,204,102
    [27] => 0,204,153
    [28] => 0,204,204
    [29] => 0,204,255
    [30] => 0,255,0
    [31] => 0,255,51
    [32] => 0,255,102
    [33] => 0,255,153
    [34] => 0,255,204
    [35] => 0,255,255
    [36] => 51,0,0
    [37] => 51,0,51
    [38] => 51,0,102
    [39] => 51,0,153
    [40] => 51,0,204
    [41] => 51,0,255
    [42] => 51,51,0
    [43] => 51,51,51
    [44] => 51,51,102
    [45] => 51,51,153
    [46] => 51,51,204
    [47] => 51,51,255
    [48] => 51,102,0
    [49] => 51,102,51
    [50] => 51,102,102
    [51] => 51,102,153
    [52] => 51,102,204
    [53] => 51,102,255
    [54] => 51,153,0
    [55] => 51,153,51
    [56] => 51,153,102
    [57] => 51,153,153
    [58] => 51,153,204
    [59] => 51,153,255
    [60] => 51,204,0
    [61] => 51,204,51
    [62] => 51,204,102
    [63] => 51,204,153
    [64] => 51,204,204
    [65] => 51,204,255
    [66] => 51,255,0
    [67] => 51,255,51
    [68] => 51,255,102
    [69] => 51,255,153
    [70] => 51,255,204
    [71] => 51,255,255
    [72] => 102,0,0
    [73] => 102,0,51
    [74] => 102,0,102
    [75] => 102,0,153
    [76] => 102,0,204
    [77] => 102,0,255
    [78] => 102,51,0
    [79] => 102,51,51
    [80] => 102,51,102
    [81] => 102,51,153
    [82] => 102,51,204
    [83] => 102,51,255
    [84] => 102,102,0
    [85] => 102,102,51
    [86] => 102,102,102
    [87] => 102,102,153
    [88] => 102,102,204
    [89] => 102,102,255
    [90] => 102,153,0
    [91] => 102,153,51
    [92] => 102,153,102
    [93] => 102,153,153
    [94] => 102,153,204
    [95] => 102,153,255
    [96] => 102,204,0
    [97] => 102,204,51
    [98] => 102,204,102
    [99] => 102,204,153
    [100] => 102,204,204
    [101] => 102,204,255
    [102] => 102,255,0
    [103] => 102,255,51
    [104] => 102,255,102
    [105] => 102,255,153
    [106] => 102,255,204
    [107] => 102,255,255
    [108] => 153,0,0
    [109] => 153,0,51
    [110] => 153,0,102
    [111] => 153,0,153
    [112] => 153,0,204
    [113] => 153,0,255
    [114] => 153,51,0
    [115] => 153,51,51
    [116] => 153,51,102
    [117] => 153,51,153
    [118] => 153,51,204
    [119] => 153,51,255
    [120] => 153,102,0
    [121] => 153,102,51
    [122] => 153,102,102
    [123] => 153,102,153
    [124] => 153,102,204
    [125] => 153,102,255
    [126] => 153,153,0
    [127] => 153,153,51
    [128] => 153,153,102
    [129] => 153,153,153
    [130] => 153,153,204
    [131] => 153,153,255
    [132] => 153,204,0
    [133] => 153,204,51
    [134] => 153,204,102
    [135] => 153,204,153
    [136] => 153,204,204
    [137] => 153,204,255
    [138] => 153,255,0
    [139] => 153,255,51
    [140] => 153,255,102
    [141] => 153,255,153
    [142] => 153,255,204
    [143] => 153,255,255
    [144] => 204,0,0
    [145] => 204,0,51
    [146] => 204,0,102
    [147] => 204,0,153
    [148] => 204,0,204
    [149] => 204,0,255
    [150] => 204,51,0
    [151] => 204,51,51
    [152] => 204,51,102
    [153] => 204,51,153
    [154] => 204,51,204
    [155] => 204,51,255
    [156] => 204,102,0
    [157] => 204,102,51
    [158] => 204,102,102
    [159] => 204,102,153
    [160] => 204,102,204
    [161] => 204,102,255
    [162] => 204,153,0
    [163] => 204,153,51
    [164] => 204,153,102
    [165] => 204,153,153
    [166] => 204,153,204
    [167] => 204,153,255
    [168] => 204,204,0
    [169] => 204,204,51
    [170] => 204,204,102
    [171] => 204,204,153
    [172] => 204,204,204
    [173] => 204,204,255
    [174] => 204,255,0
    [175] => 204,255,51
    [176] => 204,255,102
    [177] => 204,255,153
    [178] => 204,255,204
    [179] => 204,255,255
    [180] => 255,0,0
    [181] => 255,0,51
    [182] => 255,0,102
    [183] => 255,0,153
    [184] => 255,0,204
    [185] => 255,0,255
    [186] => 255,51,0
    [187] => 255,51,51
    [188] => 255,51,102
    [189] => 255,51,153
    [190] => 255,51,204
    [191] => 255,51,255
    [192] => 255,102,0
    [193] => 255,102,51
    [194] => 255,102,102
    [195] => 255,102,153
    [196] => 255,102,204
    [197] => 255,102,255
    [198] => 255,153,0
    [199] => 255,153,51
    [200] => 255,153,102
    [201] => 255,153,153
    [202] => 255,153,204
    [203] => 255,153,255
    [204] => 255,204,0
    [205] => 255,204,51
    [206] => 255,204,102
    [207] => 255,204,153
    [208] => 255,204,204
    [209] => 255,204,255
    [210] => 255,255,0
    [211] => 255,255,51
    [212] => 255,255,102
    [213] => 255,255,153
    [214] => 255,255,204
    [215] => 255,255,255
)

使用$ndiv = 1，您将获得

Array
(
    [0] => 0,0,0
    [1] => 0,0,255
    [2] => 0,255,0
    [3] => 0,255,255
    [4] => 255,0,0
    [5] => 255,0,255
    [6] => 255,255,0
    [7] => 255,255,255
)

要获得颜色的延续，您可以使用 HSL（色相、饱和度、亮度）。通过将色调从 0° 移动到 360°，您将获得一个完整的色轮。

这是 CSS 属性的示例：

for ($h=0;$h<360;$h+=2) {
    echo'<div style="background:hsl('.$h.',100%,50%);float:left;width:8px;height:12px;"></div>';
}

输出：

如果您需要rgb() 值，可以使用this answer 进行转换

【讨论】：

谢谢！我得到了更好的粒度，所以这是一个很好的观点，但我需要保持顺序，以便我可以使用直方图下方的这些颜色。您是否看到一种以正确顺序将颜色从黑色增加到白色的方法？如果你检查我的代码，这就是我使用 0 到 16777215 的原因。
我已经更新了答案，添加了另一种使用 HSL 的方法。
但我意识到这不会得到一个黑白轮......但你也可以玩光度。
这种方法更好，颜色覆盖更准确，但我需要白色和黑色+全灰色渐变。您是否知道一种将颜色索引从 imagecolorat 转换并将其映射到您在上次评论中提出的颜色范围的方法？该顺序应遵循 imagecolorat 中的颜色索引，因为这始终是起点。映射变量只是为了提供视觉支持。 imagecolorat 会给我图片中的颜色，我想像直方图一样显示它们，显示完整的色谱（有点像你在 Photoshop 中的）
我发现了一篇有趣的文章，有人试图达到同样的效果，结论是这是不可能的：hashbangcode.com/article/color-sorting-php