Javascript - 将数字数组转换并显示为颜色

Question

我正在使用Color-Thief 从图像中提取调色板。而且我已经使用 JavaScript 提取了颜色。

<img src="my-image.jpg" id="uploadedImage" alt="Uplaoded Image>

<script type="text/javascript">
    var image = document.getElementById("uploadedImage");
                    var colorThief = new ColorThief();
                    var palette = colorThief.getPalette(image, 8);
                    for (color in palette) {
                        var firstColor = palette[0];
                        var secondColor = palette[1];
                        var thirdColor = palette[2];
                        var fourthColor = palette[3];
                        var fifthColor = palette[4];
                        var sixthColor = palette[5];
                        var seventhColor = palette[6];
                        var eighthColor = palette[7];
                    }

</script>

提取的颜色例如是：

(7) [Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3)]
0
:
(3) [55, 30, 41]
1
:
(3) [210, 111, 74]
2
:
(3) [121, 196, 212]
3
:
(3) [144, 62, 57]
4
:
(3) [101, 66, 100]
5
:
(3) [189, 174, 192]
6
:
(3) [164, 116, 133]

但我的问题是我无法将这些数组转换为颜色来显示。有什么办法吗？

我已阅读this question，但答案并不能帮助我找出解决问题的方法。

this question 的答案不考虑从既不显示颜色的图像中动态获取颜色。它只是从一个空间转换到另一个空间。

旁注：如果你想试试 Color-Thief，你必须有一个服务器，因为它调用 AJAX。

Answer 1

如果您有数组数组，其中每个子数组有 3 个项目代表 R、B 和 G，您可以使用问题中的链接将它们转换为十六进制表示法：

ar = [
  [55, 30, 41],
  [210, 111, 74],
  [121, 196, 212],
  [144, 62, 57],
  [101, 66, 100],
  [189, 174, 192],
  [164, 116, 133]
]
res = ar.map(([r, g, b]) => ["#", r.toString(16), g.toString(16), b.toString(16)].join(""))
console.log(res);

document.getElementById("container").innerHTML = res.map((color) => `<div class='color-box' style='background: ${color};'></div>`).join("")

div.color-box {
  width: 50px;
  height: 50px;
  margin: 15px;
  float: left;
}

<div id="container"></div>

Answer 2

本方案使用jQuery将一堆div的背景色设置为数组中的颜色。

var colorData = [
  [55, 30, 41],
  [210, 111, 74],
  [121, 196, 212],
  [144, 62, 57],
  [101, 66, 100],
  [189, 174, 192],
  [164, 116, 133]
];
$(function() {
  var $placeholder = $("#placeholder");
  var $tmp;
  $.each(colorData, function(idx, elem) {
    $tmp = $("<div class='colorize'></div>");
    $tmp.css("background-color", "rgb(" + this[0] + "," + this[1] + "," + this[2] + ")");
    //$tmp.append($("<span>").text($tmp.css('background-color')));
    $tmp.append($("<span>").text("#" +
      twoDigitHex(this[0]) +
      twoDigitHex(this[1]) +
      twoDigitHex(this[2])));
    $placeholder.append($tmp);
  });
});

function twoDigitHex(val) {
  return ("00" + val.toString(16)).substr(-2).toUpperCase();
}

div.colorize {
  display: inline-block;
  height: 75px;
  width: 75px;
  border: 1px solid black;
  margin: 3px;
}

div.colorize>span {
  position: relative;
  top: 75px;
  font-size: 8pt;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='placeholder'></div>

编辑：调整 sn-p 以将背景颜色作为文本

编辑：可变字体颜色(black | white)

编辑：更改文本以将其放在一个跨度中，将该跨度定位在 div 下方。

编辑：根据要求结合了这个问题的几个不同答案，以显示 HEX 颜色值而不是 RGB。

编辑：结合此问题的其他答案，希望在下面创建一个更简洁易懂的变体；

var colorData = [
  [55, 30, 41],
  [210, 111, 74],
  [121, 196, 212],
  [144, 62, 57],
  [101, 66, 100],
  [189, 174, 192],
  [164, 116, 133]
];
$(function() {
  colorData.map(([r, g, b]) => {
    displaySwatch(`#${twoDigitHex(r)}${twoDigitHex(g)}${twoDigitHex(b)}`);
  });
});

function displaySwatch(hex) {
  var $placeholder = $("#placeholder");
  var $tmp = $("<div class='colorize'></div>");
  $tmp.css("background-color", hex);
  $tmp.append($("<span>").text(hex));
  $placeholder.append($tmp);
}

function twoDigitHex(val) {
  return ("00" + val.toString(16)).substr(-2).toUpperCase();
}

div.colorize {
  display: inline-block;
  height: 50px;
  width: 50px;
  border: 1px solid black;
  margin: 3px;
}

div.colorize>span {
  position: relative;
  top: 50px;
  font-size: 8pt;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='placeholder'></div>

Answer 3

Dekel 的回答在大多数情况下应该可以正常工作。我只对他的回答做了一点补充。数字可以小于 16，因此必须用“0”填充才能被视为颜色值。

ar = [
  [9, 8, 7],
  [55, 30, 41],
  [210, 111, 74],
  [121, 196, 212],
  [144, 62, 57],
  [101, 66, 100],
  [189, 174, 192],
  [164, 116, 133]
]

function toPaddedHexVal(val) {
  var hexVal = val.toString(16);
  return hexVal.length < 2 ? "0" + hexVal : hexVal;
}

res = ar.map(colorArray => "#" + colorArray.map(toPaddedHexVal).join(""))
console.log(res);

Answer 4

JavaScript 颜色可以由字符串指定；例如，'red' 和 '#123456'。由于您拥有主要值，因此您可以从 firstColor 构建一个颜色规范字符串，如下所示：

var colorSpecification = 'rgb(' + firstColor[0].toString() + ',' + firstColor[1].toString() + ',' + firstColor[2].toString() + ')';

对于您的示例，这应该产生一个字符串值'rgb(55,30,41)'。

请注意，JavaScript 颜色规范有些晦涩难懂。虽然'rgb(10,20,30)'、'#123456' 和'#12345678' 等规范被接受，但'red'、'yellow' 和'blue' 等规范也被接受。甚至'chucknorris' 也被认为是可以接受的！