Javascript 从网页中识别白色背景的图像

我正在尝试循环浏览网页上显示的图像，以确定其中哪个图像具有最左上方的白色像素

     $('img').each(function(){

        // create an image object using the current image SRC
        var image = new Image();
        image.crossOrigin = "Anonymous";
        image.src = $(this).attr('src');

        //create a canvas and place the image inside the canvas element
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height);

        //grab pixel data
        var pixel = canvas.getContext('2d').getImageData(0, 0, 1, 1).data;
        $(this).attr('data-pixel', pixel);

        //remove canvas
        $('canvas').remove();

    });

问题是，这项技术现在一直在发挥作用。当我在一个图像上运行它时，它大部分时间都工作。但是当我浏览所有图像时，我得到的是

数据pixel=“0,0,0,0”>

---

我遗漏了什么吗？我以前从未尝试过使用这种方法。如果您知道另一个版本，请告诉我。

基于以上评论，我更改了代码以触发画布创建和图像绘制加载，如下所示：

    $('img').each(function() {

  var $that = $(this);
  var image = new Image();
  var canvas = document.createElement('canvas');   
  var imageSource = $that.attr('src');
  image.crossOrigin = 'Anonymous';
  image.src = imageSource;
  image.onload = function() {

      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height);
      //grab pixel data
      var pixel = canvas.getContext('2d').getImageData(0, 0, 1, 1).data;
      $that.attr('data-pixel', pixel.toString());

      if (parseInt(pixel[0]) > 250 && parseInt(pixel[1]) > 250 && parseInt(pixel[2]) > 250) {

          $that.addClass( 'white' );
          $that.closest('table').prepend('<h5>White Background</h5>');

      }
      //remove canvas
      console.log(pixel.toString());
      $('canvas').remove();

  };

$（'img'）。每个（函数（）{
var$that=$（this）；
var image=新图像（）；
var canvas=document.createElement（'canvas'）；
var imageSource=$that.attr（'src'）；
image.crossOrigin='匿名'；
image.src=图像源；
image.onload=函数（）{
canvas.width=image.width；
canvas.height=image.height；
canvas.getContext（'2d'）.drawImage（image，0，0，image.width，image.height）；
//抓取像素数据
var pixel=canvas.getContext（'2d'）.getImageData（0,0,1,1）.data；
$that.attr（'data-pixel'，pixel.toString（））；
if（parseInt（像素[0]）>250&&parseInt（像素[1]）>250&&parseInt（像素[2]）>250）{
$that.addClass（'white'）；
$that.closest（'table'）。prepend（'White Background'）；
}
//移除画布
console.log（pixel.toString（））；
$（'canvas'）.remove（）；
};

---

}))

1）您确定所有外部图像都使用正确的CORS标头发送吗？2）

getImageData（）.data

始终返回一个数组（由r、g、b、a值组成）。因此，将数组分配给

数据像素

属性。你确定吗？是的，你遗漏了一些事情：正如devnull69正确指出的，如果你的图像没有使用正确的CORS头，图像将无法加载。但如果您解决了#1问题，您可能会注意到：从dataURI、从任何地方加载图像都是异步的，即使是缓存的，也始终是异步的。因此，当您调用

drawImage

时，图像尚未加载，画布上也没有绘制任何内容（

0,0,0,0

是透明像素，而不是白色像素

[255，255，255]

）。当然，只有当图像加载时，才需要调用其他所有内容。图像在我运行它时加载。我通过控制台加载了它，结果被击中了。有时它会给我正确的值，有时它只是将0,0,0加起来。这是我的问题。奇怪的是。我运行了一次，什么也没发生（0,0,0,0），我运行了第二次，还是什么都没发生。第三次很完美。奇怪的是，在您的代码中没有任何图像尚未加载，即使媒体已加载，这也不会改变加载图像（

image.src=something

）始终是异步的事实。