Question

想玩，并且有理由学习更多jQuery，所以我决定尝试Color Thief，但我遇到了正确输出数组的问题。遗憾的是，文档对于Color Thief来说并不是最好的，但经过一些搜索我确实找到了关于getColor()而不是getPalette（）的问题。

根据我对Color Thief的博客的理解，createPalette()是一个数组，但是当我尝试显示内容时<span>：

代码：

HTML ：

<div class="imgtest">
<img id="theimage" src="item.jpg" alt="image">
</div>
<div id="results"></div>

的jQuery ：

<script type="text/javascript">
        $(window).ready(function(){
          var sourceImage = document.getElementById("theimage");
          var colorThief = new ColorThief();
          var color = [colorThief.getPalette(sourceImage, 2)];
          var newHTML = $.map(color, function(value) {
              return('<span>' + value + '</span>');
          });
          $("#results").html(newHTML.join(""));
       });
</script>

输出：

<span>205,144,9,245,228,217,172,196,11</span>

我做错了什么？我的最终目标是在名为color[]的数组中显示每种颜色。

Answer 1

如果我认为你想要它自己的跨度中的每种颜色，你需要加入映射中的值。 color的每个值都是一个包含颜色RGB值的数组：

var color = colorThief.getPalette(sourceImage, 2);
var newHTML = $.map(color, function(value) {
    return('<span>' + value.join(', ') + '</span>');
});
$("#results").html(newHTML.join(''));

Color Thief调色板阵列输出不正确

代码：

1 个答案: