2

したがって、パーツ内に作成した「コンテキスト」変数でこの関数 getImageData を使用しています。<script>長方形を描画してから ctx.getImageData.data[0] を実行すると、赤が表示されますキャンバスに描いた長方形の値。しかし、画像をインポートしてキャンバスに描画し、 getImageData.data[0] を使用しようとすると、意味がありません。なぜ画像を正しく読み取っていないのかわかりません。これについてチュートリアルを試してみましたが、それらはすべてあいまいで、一緒に書かれたセグメントしかありません。

したがって、長方形を描画すると、その色の値は問題なく表示されますが、キャンバスに長方形を描画しなくても、画像を描画すると、その特定のピクセルの値が得られません。

誰かが私を助けることができますか？これが私の現在のコードです：

<html>
<head>
<title>
Color Test :)
</title>
</head>

<body>

<canvas id = "ColorTest" width = "500" height = "500">
please don't use shitty browsers :)
</canvas>

<script>


//netscape.security.PrivilegeManage…
var canvas = document.getElementById("ColorTest")
, ctx = canvas.getContext("2d")
, image = new Image()

image.onload = function(){
ctx.drawImage(image,0,0)
}


image.src = 'Pikachu.gif'


ctx.fillStyle = "rgb(123,40,170)"
ctx.fillRect(0,0,100,100)



var imagedata = ctx.getImageData(0,0,100,100)
, spot = 0

while(imagedata.data[spot] == 0){
spot++
}

console.log(imagedata.data[0])


</script>
</body>
</html>
4

2 に答える 2

2

次の警告は賢明ですか？

image.onload = function() {
  ctx.drawImage(image, 0, 0);
  var id = ctx.getImageData(0,0,canvas.width,canvas.height);
  alert([id.data[0], id.data[1], id.data[2], id.data[3]].join(", "));
}
于 2011-07-13T16:35:53.550 に答える
1

画像が透過している可能性があります。単色の非透過画像で試してください。

どのブラウザを使用していますか? 別のドメインから画像をロードするときに getImageData を使用することは許可されていません (セキュリティ上の問題)。私の記憶が正しければ、ローカルでスクリプトを実行するときにドメインを特定できないブラウザーがいくつかあります。

于 2011-07-11T09:35:26.353 に答える