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的答案并不考虑从既不显示颜色的图像中动态获取颜色。它只是从一个空间转换到另一个空间。

SIDE注意：如果您想尝试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>

编辑：已调整的代码段将背景颜色设为文字

修改：可变字体颜色(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的答案应该可以正常运作。我的回答只是一个小小的补充。数字可以是＆lt; 16，所以他们必须填充＆＃34; 0＆＃34;被视为颜色值。

＆＃13;

.card

＆＃13;

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'被认为是可以接受的！

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

4 个答案: