Question

如果标题不是很具描述性，请原谅我我正在使用vibrant.js来获得图片的颜色HEX，一切都按预期工作，我对目前为止所有内容都非常满意，请帮助我/指导我如何获取输入文本字段中的值，很多人感谢！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <script src="https://jariz.github.io/vibrant.js/dist/Vibrant.js"></script>

   
</head>
<body>
    
    
How to get the console result in the input fields below?
</br>
<label>1st<label>
<input value="" id="1"></br>
<p></p>
<label>2nd<label>
<input value="" id="2"></br>
<p></p>
<label>3rd<label>
<input value="" id="3"></br>
<p></p>
<label>4th<label>
<input value="" id="4"></br>
<p></p>
<label>5th<label>
<input value="" id="5"></br>
 
    
        <div class="row examples">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <img data-src="examples/3.jpg">
                    </div>
                </div>
            </div>
           
<script>

var img = document.createElement('img');
img.setAttribute('src', 'examples/octocat.png')

img.addEventListener('load', function() {
    var vibrant = new Vibrant(img);
    var swatches = vibrant.swatches()
    for (var swatch in swatches)
        if (swatches.hasOwnProperty(swatch) && swatches[swatch])
            console.log(swatch, swatches[swatch].getHex())

    /*
     * Results into:
     * Vibrant #7a4426
     * Muted #7b9eae
     * DarkVibrant #348945
     * DarkMuted #141414
     * LightVibrant #f3ccb4
     */
});

</script>
        
</body>
</html>

我的控制台完美返回

 * Vibrant #7a4426
 * Muted #7b9eae
 * DarkVibrant #348945
 * DarkMuted #141414
 * LightVibrant #f3ccb4

主要目标是将Color HEX放入输入文本字段（您可以在console.log中删除颜色名称删除（swatch）。

Answer 1

您可以尝试以下内容

for (var i=0; i< swatches.length; i++)
     if (swatches.hasOwnProperty(swatches[i]) && swatches[i]){
          document.getElementById(""+(i+1)).value = swatches[i].getHex();
          console.log(swatches[i], swatches[i].getHex())
        }

Answer 2

我采用这种方法（与你的循环不同），因为我需要捕获输入框;

幸运的是，你有1,2,3,4,5;

所以我在交互中使用索引;这种迭代索引在for-in结构中很难;

希望这有助于你。

for(i=1;i<=swatches.length;i++) {
    if (swatches.hasOwnProperty(swatch) && swatches[swatch]) let hexValue =  swatches[swatch].getHex();
    if (hexValue != undefined) {
        document.getElementById(i).value = hexValue;
    }
}

Answer 3

看看我做的这个例子。希望它有所帮助！

var url = 'https://images.unsplash.com/photo-1465188035480-cf3a60801ea5?dpr=1&auto=format&fit=crop&w=568&h=568&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D';
var img = document.createElement('img');
img.setAttribute('src', url + '&' + new Date().getTime());
img.setAttribute('crossOrigin', '');

img.addEventListener('load', function() {
    var vibrant = new Vibrant(img);
    var swatches = vibrant.swatches()
    var i = 0;
    for (var swatch in swatches)
        if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
          document.getElementById(""+(i+1)).value = swatches[swatch].getHex();
          i = i + 1;
        }
});

<script src="https://jariz.github.io/vibrant.js/dist/Vibrant.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <label>Vibrant</label>
      <input value="" class="form-control" id="1">
      <label>Muted</label>
      <input value="" class="form-control" id="2">
      <label>DarkVibrant</label>
      <input value="" class="form-control" id="3">
      <label>DarkMuted</label>
      <input value="" class="form-control" id="4">
      <label>LightVibrant</label>
      <input value="" class="form-control" id="5">
    </div>
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body">
          <img class="img-responsive" src="https://images.unsplash.com/photo-1465188035480-cf3a60801ea5?dpr=1&auto=format&fit=crop&w=568&h=568&q=60&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        </div>
      </div>
    </div>
  </div>
</div>

你也可以在这里找到它： https://jsfiddle.net/bgmpow5q/

如何在多个输入字段中填充以下对象？

3 个答案: