キャンバスから画像データを取得できません。私は間違って何をしていますか？

キャンバスからピクセルデータを取得できないようです（Chrome 12）。私は間違って何をしていますか？キャンバスから画像データを取得できません。私は間違って何をしていますか？

完全な例。すべてのコンソールログはゼロになります。黒と白のピクセルが混在しています。

明確化：ピクセルデータを正しく取得できることをテストするために黒い四角形を描いています。私はいくつか255, 255, 255（白）といくつかは0, 0, 0（黒）を期待します。私は白いピクセルデータしか取得しません。

<html> 
<canvas id="canvas" style="border: 1px solid black" width="20" height="20"></canvas> 

<script> 
var x; 
var y; 

var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 

// some of the pixels should be black, some white. 
context.fillRect(0, 0, 10, 10); 

var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 

for (y = 0; y < imageData.height; y ++) 
{ 
    for (x = imageData.width - 1; x >= 0; x--) 
    { 
     console.log(x, y, 
     imageData.data[((y*(imageData.width*4)) + (x*4)) + 0], 
     imageData.data[((y*(imageData.width*4)) + (x*4)) + 1], 
     imageData.data[((y*(imageData.width*4)) + (x*4)) + 2]); 
    } 
} 
</script> 
</html>

出典

2011-07-20 Joe

私のChrome 12でうまく動作します。http://jsfiddle.net/va3C5/もしそうなら、あなたの問題は他の場所にあります。 – Niklas

何がうまくいくのですか？私はそのページのコンソール出力を見ることができません。 – Joe

ログの出力：http://imgur.com/xwYxR – Niklas

私は試して同じことを経験しました。どうして？アルファチャンネルを見てください。画像上で白く見える部分は、実際は黒で、不透明度の値は0です（これは完全に透明です）。したがって、あなたは一目瞭然です。背景、それは白です。

最初に白い20×20の矩形を描画し、次に黒い10×10の矩形を描画すると、すべてが正常に機能します（have a look here）。

出典

2011-07-20 14:42:25

あなたの計算が何かを言う一方であなたは、0からheight - 2に反復しています。あなたの計算は、完全な高さと幅を使用します。

第2に、白のピクセルは白ではなく透明です。体の背景を緑色に変更すると、ピクセルが緑色になるためです。 alphaプロパティはこれを確認します（データのインデックス3）：http://jsfiddle.net/va3C5/1/。

あなたの白いピクセルが体の背景色（白い）を照らしています - キャンバスのピクセルは白くはなく透明です。

だから、同じように反復し、ポイントに来て：それぞれyについて

for(var x = 0; x < imageData.width; i++) { ... }

と同じ。そして透明性について覚えておいてください。

出典

2011-07-20 14:41:40 pimvdb

キャンバスから画像データを取得できません。私は間違って何をしていますか？

答えて

関連する問題