Javascript显示在多个背景上的img的平均颜色_Javascript_Jquery_Css_Function_Color Thief

Javascript显示在多个背景上的img的平均颜色

javascript jquery css function

Javascript显示在多个背景上的img的平均颜色,javascript,jquery,css,function,color-thief,Javascript,Jquery,Css,Function,Color Thief,正如您在下面看到的，我正在尝试编写一个程序，该程序将获取图像的平均颜色，然后将其显示为img所在父类的背景每个图像都存储在一个单独的类中：“sqr1”、“sqr2”e.t.c 问题是最后一个图像元素的平均颜色显示为所有父类标记的背景（“sqr1”、“sqr2”e.t.c）有没有办法把这两者分开这样做有更好的方法吗 <html> <head> <title>getting average color</title> <scrip

正如您在下面看到的，我正在尝试编写一个程序，该程序将获取图像的平均颜色，然后将其显示为img所在父类的背景

每个图像都存储在一个单独的类中：“sqr1”、“sqr2”e.t.c

问题是最后一个图像元素的平均颜色显示为所有父类标记的背景（“sqr1”、“sqr2”e.t.c）

有没有办法把这两者分开

这样做有更好的方法吗

<html>

<head>
  <title>getting average color</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="js/color-thief.js"></script>
</head>

<body>
  <p id="bob">...</p>

  <div class="sqr1">
    <img src="memes/apple.jpg" width="400" height="400">
  </div>

  <p></p>

  <div class="sqr2">
    <img src="memes/pie.jpg" width="400" height="400">
  </div>

  <script type="text/javascript">
    var x;
    var allimgs = document.getElementsByTagName("img");
    var imglen = 2;

    let change = function(color,img){
      for (var i = 0; i < imglen; i++) {
          if (allimgs[i].src == img){
            allimgs[i].parentElement.style.backgroundColor = 'rgb('+color[0]+','+color[1]+','+color[2]+')';
          }
      }
    let colormix = function(){
      for(x = 0; x<imglen; x++){
        var colorThief = new ColorThief();
        colorThief.getColorFromUrl(allimgs[x].src, change,1);
        console.log();
      }
    }
    colormix();
  </script>
</body>

</html>


获得平均颜色


var x；
var allimgs=document.getElementsByTagName（“img”）；
var imglen=2；
让变化=功能（颜色、img）{
对于（变量i=0；i

您的问题是JavaScript编程中的一个经典问题：您在循环中修改对象引用，无意中将所有对象设置为引用相同的值。有许多解决方案；我首选的解决方案是将for循环的内部包装在立即调用的函数expressi中在（iife）上，为了形成变量的闭合范围：

let change = function(color,img){
  for (var i = 0; i < imglen; i++) {
      (function (index) {
        if (allimgs[index].src == img){
          allimgs[index].parentElement.style.backgroundColor = 'rgb('+color[0]+','+color[1]+','+color[2]+')';
        }
      })(i)
  }
}
let colormix = function(){
  for(x = 0; x<imglen; x++){
    (function (index) {
      var colorThief = new ColorThief();
      colorThief.getColorFromUrl(allimgs[index].src, change,1);
      console.log();
    })(x)
  }
}

let change=函数（颜色、img）{
对于（变量i=0；i
要更全面地解释此处发生的情况，请参见以下问题：
为了避免将来出现类似的问题，请仔细阅读Javascript作用域和闭包：
啊，简单的逻辑错误。您每次都在循环并设置所有图像的颜色。您需要在change
传递索引中删除循环，否则它们将始终作为最终颜色。一种方法是s是通过将索引参数绑定到函数：
var x;
var allimgs = document.getElementsByTagName("img");
var imglen = allimgs.length;
let change = function(index, color, img){
   if (allimgs[index].src == img){
      allimgs[index].parentElement.style.backgroundColor = 'rgb('+color[0]+','+color[1]+','+color[2]+')';
   }
}
let colormix = function(){
  for(x = 0; x<imglen; x++){
    var colorThief = new ColorThief();
    colorThief.getColorFromUrl(allimgs[x].src, change.bind(null, x),1);
    console.log();
  }
}

varx；
var allimgs=document.getElementsByTagName（“img”）；
var imglen=allimgs.长度；
let change=函数（索引、颜色、img）{
if（allimgs[index].src==img）{
allimgs[index].parentElement.style.backgroundColor='rgb（'+color[0]+'，'+color[1]+'，'+color[2]+'）；
}
}
设colormix=function（）{
对于（x=0；x
我还切换了imglen以动态获取其长度。

下面是我用来证明这一点的JSFIDLE:

如果这能解决您的问题，我将删除我的其他答案。
我在这个答案中复制了您的代码，并替换了“索引”i和x无效。这两种颜色不分开，仍然显示最后一种颜色。为什么要用外部i和x替换内部索引变量？闭包中的索引变量解决了问题。我认为与for循环中的变量相对应。另一方面，这仍然不能解决问题。