1

キャンバス (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>
4

2 に答える 2

3

私は試してみて、同じことを経験しました。なんで？アルファチャネルを見てください。画像上で白として表示されている領域は、実際には不透明度の値が0の黒です（これは、完全に透明であることを意味します）。したがって、あなたは、別名、透けて見えます。白の背景。

最初に白い20x20の長方形を描き、次に黒い10x10の長方形を描くと、すべてが正常に機能します（こちらをご覧ください）。

于 2011-07-20T14:42:25.570 に答える
1

あなたの計算が何か他のことを言っている間、あなたはから0までを繰り返しています。height - 2計算では、高さと幅全体を使用します。

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

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

つまり、要点をつかむには、次のように繰り返します。

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

yについてもそれぞれ同じです。そして、透明性について心に留めておいてください。

于 2011-07-20T14:41:40.773 に答える