1

HTML5のcanvas要素の使い方を学んでいます。長方形の描画、呼び出しgetImageData、ピクセルの操作、そしてputImageData長方形の色の変化などを確認することに成功しました。

今、私は引っ掛かりにぶつかったキャンバスに画像をロードしようとしています。drawImageキャンバスのコンテキストを呼び出した後fillRect、後で呼び出されたとしても、画像の後ろに長方形を描画するように、画像が描画されていない領域にのみ描画しますdrawImage。また、putImageData長方形を含む表示領域でも動作を停止し、ピクセル操作は行われません。で行をコメントアウトするとdrawImage、再び機能します。

私がやりたいのは、長方形を使ったときと同じように、画像内のピクセルを操作することです。これが機能しない理由はありますか？

画像コードを描く：

var img = new Image();
img.onload = function () {
     //comment out the following line, everything works, but no image on canvas
     //if it's left in, the image sits over the rectangles, and the pixel
     //manipulation does not occur
     context.drawImage(img, 0, 0, width / 2, height / 2);
}
img.src = path;

長方形のコードを描く：

for (var i = 0; i < amount; i++)
{
    x = random(width - size);
    y = random(height - size);
    context.fillStyle = randomColor();
    context.fillRect(x, y, size, size);
}

Maniuplateピクセルコード：

var imgd = context.getImageData(0, 0, width, height);
var pix = imgd.data;

//loop through and do stuff

context.putImageData(imgd, 0, 0);
4

2 に答える 2

2

投稿したコードに特に問題はありません。コード全体を提供するか、次のことを検討してください。

  1. globalCompositeOperationをどこかで変更していますか？
  2. randomColor()透明すぎて見えない色を作っているのですか？
  3. 言及していないクリッピング領域はありますか？
  4. すべてを正しいコンテキストに描画していますか？
  5. 実行を停止してエラーを引き起こすスペルミスはありますか？
  6. イベントのシーケンスが間違っている可能性があります。画像を読み込んでから長方形を描画し、画像の読み込みを完了すると、画像の背後に長方形が描かれたように見えますが、それは単に自然な順序でした。
  7. 別のドメインからの画像がキャンバスに描画されているため、putImageDataがセキュリティエラー（Firefoxで見やすい）を引き起こしていますか？このエラーにより、後続のすべての描画コードの実行が停止する可能性があるため、説明している効果が得られます。これらのルールのいずれかに違反していないかどうかを確認してください。具体的には、別の原点からキャンバスに画像を描画してから、getImageDataを使用しようとします。

私のリストの最後のアイテムまたは最後から2番目のアイテムがあなたに悲しみを与えている可能性があります。

自分のサーバーでイメージをホストして、イメージが消えるかどうかを確認するか、FirefoxのWebコンソールを見て、セキュリティエラーについて不平を言っているかどうかを確認してください。

または、Chrome / IE9でウェブコンソールを開いて、画像を描画するときに描画コードが実際にヒットするかどうかを確認します

于 2011-09-22T12:22:10.990 に答える
0

OK、サイモンは私を正しい道に導いてくれました。ブラウザはローカルファイルシステムのファイルをウェブサーバーのファイルとは異なる方法で処理しているように見えます。具体的には、画像ファイルはとしてフラグが付けられていorigin-clean = falseます。getImageDataこれにより、画像を描画した後にコンテキストを呼び出そうとしたときに、セキュリティ例外（NS_ERROR_DOM_SECURITY_ERR 1000）が発生していました。

解決策1は、Webサーバーでファイルをホストすることです。

解決策2はちょっとしたハックですが、私の目的には問題ありません。

try {
    try { 
        var imgd = context.getImageData(0, 0, width, height); 
    } catch (e) { 
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
        var imgd = context.getImageData(0, 0, width, height);
    }
} catch (e) {throw new Error("unable to access image data: " + e)}

セキュリティ例外がスローされた場合、ブラウザはユーザーにオーバーライドの許可を求めます。

于 2011-09-23T02:22:01.907 に答える