Javascript - キャンバス要素の下の画像からピクセルデータを取得しますか？

Question

getImageData（）を使用してキャンバスイメージ上のピクセルカラーデータをサンプリングできます。透明なキャンバス要素を背景画像やFlashムービーの上に重ねると、そのキャンバスタグから色をサンプリングできますか？

Answer 1

フィルの権利は、あなたはできません。キャンバスは、設計上、独自のピクセルデータのみを返し、他の要素に由来するスクリーン上のレンダリングされたコンテンツは返しません。

ページ全体をカバーするキャンバス要素を作成し、レンダリングされた画面のイメージをキャプチャできます。

可能であれば、これはクロスサイトスクリプティングセキュリティホールになります。ターゲットサイトをiframeにして（ユーザーのCookie /認証/イントラネットを利用してアクセスする）、ピクセル単位でコンテンツを吸い取ることができます。

Answer 2

だと思います。その時点でキャンバスの色を取得します。私は方法document.defaultview.getComputedStyle(element,pseudoElt)を見つけましたが、背景色のない1ピクセルのdivでは、「透明」を返しました。

残念ながら、現時点では不可能な場合があります。あなたのより高いレベルの目標は何ですか？私たちは別のルートを考え出すことができるかもしれません。

"イメージデータをjavascriptオブジェクトにコピーすることは以前から考えていましたが、ページ全体をカバーし、レンダリングされた画面のイメージをキャプチャするキャンバス要素を作成することができました。おそらく世界のクロスブラウザテスト。

静的画像であることに気にしない場合は、Browser Shotsという素晴らしいウェブサイトがあります。これは、さまざまなブラウザの巨大な範囲で実行されているあなたのウェブサイトのスクリーンショットを生成します。