2011-06-24 19 views
11

私は、キャンバスを使用してHTML5ビデオストリームから画像をキャプチャし、ページに表示できることを知っています。私が興味を持っているのは、キャンバスオブジェクトを使ってWebページの上にオーバーレイを作成し、そのページまたはその一部のPNGスナップショットをキャプチャすることです。HTML5 Canvasを使用してWebページの一部をキャプチャしますか?

私はウェブページの見直しツールを強化したいです(ブラウザページ内にスクリーンキャプチャを追加して、リモートサーバに送信することができます)。

YouTrackはJavaアプレットでこれを行いますが、現代のHTML5テクニックでは可能でしょうか?

この問題に対するその他の提案された解決策もあります。

ありがとうございました

+0

私は、これは不可能になるだろうように、キャンバスをサポートするすべてのブラウザでは、描画コマンドの後にページにその後、複合レンダリングオフスクリーン行うことをかなり確信しています。ごめんなさい。 –

+0

[HTML5/Canvas/Javascriptを使用してスクリーンショットを撮る]の複製が可能です(http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots) – ChrisF

+0

[スクリーン共有HTML5のブラウザタブ](http://www.html5rocks.com/jp/tutorials/streaming/screenshare/)をご覧ください。画面共有についてですが、これを単純化して1ページのスクリーンショットを撮ることができます。 – falconepl

答えて

6

これは多くの質問です。簡単な答えは、セキュリティの理由から実行できないということです。

長すぎる回答には、FireFoxのみが持つ機能(セキュリティ上の理由から)のみが動作するdrawWindow機能についての説明が含まれています。将来的には、今日のJavaアプレットのように、ユーザが許可を与えた後に動作する可能性があります。将来的には、それは仕様の一部であっても、Mozillaによって行われる一回限りのものではないかもしれません。

気が狂ったら、HTMLレンダラー全体を作って、ページのDOMツリーをとり、Canvasでレンダリングしようとすることができます。これは愚かな仕事です。

13

DOMを読み込んでキャンバスイメージを作成し、そこからjavascriptを作成することで、画面ビューを「エミュレート」できます。 http://hertzen.com/experiments/jsfeedback/とその下にあるhtml2canvasスクリプトを見て、純粋にJavascriptで(プラグインやサーバーとのやりとりが必要ない)どのようにできるか考えてみてください。

0

あなたのHTMLをSVGイメージに埋め込み、そのSVGをキャンバスにレンダリングする可能性があります。 HTMLに含めることができるものに制限があります(JavaScriptや外部リソースがないなど、画像をデータURLにエンコードする必要があります)。それを念頭に置いて、あなたの仕事をするかもしれません。

このテクニックは文書化され、デモされてon MDNです。

1

このスクリプトを使用すると、ウェブページやその一部の「スクリーンショット」をユーザーのブラウザで直接利用できます。スクリーンショットはDOMに基づいており、実際のスクリーンショットを作成するのではなく、ページで利用可能な情報に基づいてスクリーンショットを作成するため、実際の表現に対して100%正確ではない場合があります。

http://html2canvas.hertzen.com/

関連する問題