getImageData()を使用してキャンバスイメージ上のピクセルカラーデータをサンプリングできます。透明なキャンバス要素を背景画像やFlashムービーの上に重ねると、そのキャンバスタグから色をサンプリングできますか?Javascript - キャンバス要素の下の画像からピクセルデータを取得しますか?
答えて
フィルの権利は、あなたはできません。キャンバスは、設計上、独自のピクセルデータのみを返し、他の要素に由来するスクリーン上のレンダリングされたコンテンツは返しません。
ページ全体をカバーするキャンバス要素を作成し、レンダリングされた画面のイメージをキャプチャできます。
可能であれば、これはクロスサイトスクリプティングセキュリティホールになります。ターゲットサイトをiframeにして(ユーザーのCookie /認証/イントラネットを利用してアクセスする)、ピクセル単位でコンテンツを吸い取ることができます。
だと思います。その時点でキャンバスの色を取得します。私は方法document.defaultview.getComputedStyle(element,pseudoElt)
を見つけましたが、背景色のない1ピクセルのdivでは、「透明」を返しました。
残念ながら、現時点では不可能な場合があります。あなたのより高いレベルの目標は何ですか?私たちは別のルートを考え出すことができるかもしれません。
"イメージデータをjavascriptオブジェクトにコピーすることは以前から考えていましたが、ページ全体をカバーし、レンダリングされた画面のイメージをキャプチャするキャンバス要素を作成することができました。おそらく世界のクロスブラウザテスト。
静的画像であることに気にしない場合は、Browser Shotsという素晴らしいウェブサイトがあります。これは、さまざまなブラウザの巨大な範囲で実行されているあなたのウェブサイトのスクリーンショットを生成します。
私は以前に画像データをjavascriptオブジェクトにコピーするアイディアを持っていました。ページ全体をカバーするキャンバス要素を作成し、レンダリングされた画面のイメージをキャプチャすることができます。そのデータを取得したら、実世界のクロスブラウザテストを行うことができます。 – Geuis
ブラウザのウェブサイトに関する質問に答えを追加しました。これはあなたが素敵でシンプルな方法で考えていることを行うはずです。 –
この質問はおそらく関連しています(同じ問題を解決しようとしています):http://stackoverflow.com/questions/2754865/how-to-get-the-rgb-value-of-an-image -in-a-page-using-javascript –