0

I am trying to loop over an html list of images and extract the src from each image to find out if the background is white or not using this code below. The code works separately but when placed in a for loop it doesn't work. I'm not sure why. Can you please help? Thanks : )

DEMO HERE: https://jsbin.com/wejagumuqo/edit?html,js,console,output

Here's how the example list of images

<html>
<canvas id="canvas" width="300px" height="300px"></canvas><br>

<div class="item-header">
<img width="584" height="438" src="//ae01.alicdn.com/kf/Hbd046277567545daba5244ff3aa7f5b4f/Men-s-Casual-font-b-Shoes-b-font-Breathable-Male-Mesh-Running-font-b-Shoes-b.jpg_220x220xz.jpg_.webp"
</div>


<div class="item-header">
<img width="584" height="438" src="https://images-na.ssl-images-amazon.com/images/I/413bCCpklpL._AC_.jpg">
</div>

<div class="item-header">
<img width="584" height="438" src="//ae01.alicdn.com/kf/HTB1DFOWN7voK1RjSZFNq6AxMVXay/Couple-Running-Shoes-Breathable-Outdoor-Male-Sports-Shoes-Lightweight-Sneakers-Women-Comfortable-Athletic-Training-Footwear.jpg_220x220xz.jpg_.webp">
</div>
  
</html>

and here's the javascript file to scan through each list and output if the background is white or not

  
for (i=0; i < 3 ; i++) {
  
var canvas = document.getElementById("canvas"),
              canvasWidth = canvas.width,
        canvasHeight = canvas.height,
        c = canvas.getContext("2d"),
        img = new Image();

        img.crossOrigin="anonymous";
    img.src = document.querySelectorAll('.item-header')[i].children[0].src
    img.onload = drawImage;
    
    function drawImage(){
      // Prepare the canvas
      var ptrn = c.createPattern(img, 'repeat'); 
      c.fillStyle = "white";
      c.fillRect(0,0,canvasWidth,canvasHeight);
      c.fillStyle = ptrn;
      c.fillRect(0,0,canvasWidth,canvasHeight);
      
      // Get img data
      var imgData = c.getImageData(0, 0, canvasWidth, canvasHeight),
          data = imgData.data,
          colours = {};
      
      // Build an object with colour data.
      for (var y = 0; y < canvasHeight; ++y) {
        for (var x = 0; x < canvasWidth; ++x) {
          var index = (y * canvasWidth + x) * 4,
              r = data[index],
              g = data[++index],
              b = data[++index],
              rgb = rgbToHex(r,g,b);
          
          if(colours[rgb]){
            colours[rgb]++;
          }else{
            colours[rgb] = 1;
          }
        }
      }
      
      // Determine what colour occurs most.
      var most = {
        colour:'',
        amount:0
      };
      for(var colour in colours){
        if(colours[colour] > most.amount){
          most.amount = colours[colour];
          most.colour = colour;
        }
      }


     console.log(img.src);
    console.log("Highest occurence:",most);

    }

}
    
    function rgbToHex(r, g, b) {
      return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }
Ani
  • 328
  • 1
  • 4
  • 13
  • the problem is with the variable `c` ... by the time `drawImage` is called (asynchronously), c is the last canvas context for ALL subsequent calls to drawImage ... try using `let c=` instead of `var c=` ... i.e. change the `var canvas` to `let canvas` since you declaring the variables in one statement - also, for completeness do `for (let i=0;` – Jaromanda X Oct 09 '20 at 00:01
  • Thank you soo much! I changed the 'var' to 'let' and it works now! You're the best ^_^ – Ani Oct 09 '20 at 00:37

0 Answers0