javascript - 带有画布的Javascript循环图像

问题描述

我正在尝试遍历图像的 html 列表并从每个图像中提取 src，以使用下面的代码来确定背景是否为白色。代码单独工作，但放在 for 循环中时不起作用。我不确定为什么。你能帮忙吗？谢谢：）

在这里演示：https ://jsbin.com/wejagumuqo/edit?html,js,console,output

这是图像示例列表的方式

<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>

这是扫描每个列表并输出背景是否为白色的javascript文件

  
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);
    }

标签： javascripthtmljquerycsscanvas

javascript - 带有画布的Javascript循环图像

问题描述

解决方案

推荐阅读