Imageを読み込んだときにgetImageDataが0を返します

Question

PNGを読み込んで、完全に不透明であるかどうかを確認しようとしています。これは、アルファチャンネルが画像全体の100％に近いことを意味します。したがって、キャンバスと2Dコンテキストを使用してピクセルデータを取得し、アルファ値をチェックしてループします。

私の驚いたことに、明らかにすべきではないゼロ（RGBA = [0000]）の全領域が得られます。焦点の

ブラウザ：

var imageData = zipHandler.zip.file(src); // binary image data 

var texture = new THREE.Texture(); 

var img = new Image(); 
img.addEventListener('load', function (event) { 

    texture.imageHasTransparency = false; // extend THREEJS Texture by a flag 

    if (img.src.substring(imgSrc.length-4).toLowerCase().indexOf("png") > -1 
     || img.src.substring(0, 15).toLowerCase().indexOf("image/png") > -1) { 

     var canvas = document.createElement('canvas'); 
     var context = canvas.getContext('2d'); 
     context.drawImage(img, 0, 0, img.width, img.height); 
     var pixDataContainer = context.getImageData(0, 0, img.width, img.height); 
     var pixData = pixDataContainer.data; 

     // search for pixel.alpha < 250 
     for (var pix = 0, pixDataLen = pixData.length; pix < pixDataLen; pix += 4) { 
      if (pixData[pix+3] < 250) { 
       texture.imageHasTransparency = true; 
       break; 
      } 
     } 
    } 

    texture.image = img; 
    texture.needsUpdate = true; 
    this.removeEventListener('load', arguments.callee, false); 

}, false); 

var fileExtension = src.substr(src.lastIndexOf(".") + 1); 
img.src = "data:image/"+fileExtension+";base64,"+ btoa(imageData.asBinary()); 

順序が正しいです：最初の（新しいイメージを定義する。ここクロム50.0.2661.87

は、それがThreeJS環境に埋め込まれている、私のコードです）、次にonload関数、そしてソースを指定します。

Answer 1

解決済み。イメージはキャンバスよりも大きかったので、context.drawImage（）が開始されたときに、領域の一部だけが塗りつぶされました。画像サイズに合わせてキャンバスの寸法を設定しましたので、今のところ動作します。

// ... 
var canvas = document.createElement('canvas'); 
var context = canvas.getContext('2d'); 
canvas.width = img.width; // !!!!! 
canvas.height = img.height; // !!!! 
context.drawImage(img, 0, 0, img.width, img.height); 
var pixDataContainer = context.getImageData(0, 0, img.width, img.height); 
var pixData = pixDataContainer.data; 
// ...