ウェブページから白い背景を持つ画像を特定する

Question

ウェブページに表示された画像をループして、どれが左上のピクセルが白かを判断しようとしています。

 $('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(); 

    }); 

問題は、これは今のところ常に問題になっています。私はそれを単一のイメージ上で走らせるとほとんどの場合動作します。しかし、すべての画像を見ると、data-pixel="0,0,0,0"></img>が得られます。

私に何か不足していますか？これまでにこの方法を試したことはありませんでした。別のバージョンが分かっている場合は、教えてください。 I上記のコメントに基づいて

Answer 1

は、キャンバスの作成や画像がそうようにオンロード描画トリガするためにコードを変更：

$('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(); 

    }; 

}）。