getImageData関数の問題

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

矩形を描くと、その色の値がうまく出てきますが、キャンバスに矩形を描いていなくても画像を描くと、その特定のピクセルの値は決して画像に表示されません。

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

<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>

出典

2011-07-11 Feng Huo

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-13 16:35:53

これは1回しか動作していない可能性があります。（少なくともローカルホストファイルシステム上で実行しているとき）エラーメッセージは 'Uncaught SecurityError： 'CanvasRenderingContext2D'の 'getImageData'を実行できませんでした：キャンバスはクロスオリジンデータによって汚染されています。 – zipzit

画像が透明である可能性があります。単色ではない画像を試してみてください。

どのブラウザが使用していますか？別のドメインからイメージを読み込む際にgetImageDataを使用することはできません（セキュリティ上の問題）。正しく覚えていれば、スクリプトをローカルで実行しているときにドメインを特定できないブラウザがいくつかあります。

出典

2011-07-11 09:35:26 Rickard

答えて

関連する問題