Question

我正在设置一个项目，其中，干净地说，用户发送图像（上传），它立即显示在屏幕上，其主要颜色显示在特定的div中。

我已准备好并准备好了代码，但它已经分开了;一个代码/脚本负责发送和显示图像，另一个代码/脚本检测颜色，但是检测已插入文档中的图像。我无法找到一种逻辑，将它们组合在一起，使其像我在开始时所说的那样工作......

有可能吗？

这是在线演示： http://simulaplayer.esy.es/demo/

这里是view-source：

<head>
  <script src="js/color-thief.js"></script>
  <script src="js/jquery.js"></script>


<style type="text/css">
#mydiv {
   width: 100px;

   height: 100px;

   border: 1px solid #000;
}
#clock{
   background-image:url('');
   background-size:cover;
   background-position: center;
   height: 250px; width: 250px;
   border: 1px solid #bbb;
}
    </style>
</head>
<body>

/* Image upload and preview: */

<input type='file' id='getval' name="background-image" /><br/><br/>
<div id='clock'></div>

<script>
document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
   var file = document.getElementById("getval").files[0];
   var reader = new FileReader();
   reader.onloadend = function(){
      document.getElementById('clock').style.backgroundImage = "url(" + reader.result + ")";        
   }
   if(file){
      reader.readAsDataURL(file);
    }else{
    }
}
</script>

/* Picks the main color of the image */

    <img src="img/photo3.jpg" id="myimg" />
    <div id="mydiv"></div>

    <script>
      $(window).ready(function(){
        var sourceImage = document.getElementById("myimg");
        var colorThief = new ColorThief();
        var color = colorThief.getColor(sourceImage);
        document.getElementById("mydiv").style.backgroundColor = "rgb(" + color + ")";
       });
    </script>
</body>

*（对不起我的英文，我不太清楚。）

Answer 1

在获取image.see https://jsfiddle.net/feexon/w1dty7yj之前，您必须将base64 dataURL转换为图像。并且在图像文件更改后，您从未调用过该图像的主色。

var image=new Image();
image.src=reader.result
imageChanged(image);

有办法将这些代码放在一起吗？

1 个答案: