2011-06-29 30 views
11

私は招待状を持っていませんが、TWIGで使用されています。 以下のように動作します:Google+フィードバックシステムのスクリーンショット部分はどのように機能しますか?

ハイライト表示する部品、ブラックアウトする部品を選択できます。 次のステップでそのスクリーンショットが作成され(?)、送信される他のブラウザ情報をプレビューできます。

Googleはそのスクリーンショットをどのように作成しますか?それはサーバー側の処理のために完全に変更されたDOMを送信しますか?他にどのような黒い魔法が含まれていますか?

+5

重複:http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots –

答えて

9

ハイライトとブラックアウトは単なるHTML divsです。 ページのスクリーンショットはキャンバスです。

私はChromeの開発ツールを使用してこれを確認しました。それはFirefoxとInternet Explorerでも機能するので、間違いなくChromeのことだけではありません。それはdivであることを示すために強調しここ

がハイライト要素の一つと開発ツールのスクリーンショットです:

Google Chrome Developer Tools - Feedback Tool

1枚のキャンバスがあります:

Canvas

ダイアログに次のように表示されます:

ページのスナップショットを撮っているうちに、 をハイライト表示してください。

サーバー上のページのスクリーンショットをレンダリングしているようです([ネットワーク]タブにリクエストがあり、リクエストURLの変数に応じてスナップショットとフィードバックが必要です)。ページ上にスクリーンショットを配置します。

「次へ」をクリックすると、すべての情報が表示された別のダイアログが開き、最終的なスクリーンショットがハイライトとブラックアウトでレンダリングされます。

Final dialog

私は、彼らはしかし、「強調表示されたテキスト」の部分をやったかどうかはわかりません。

0

機能を知っていませんが、どのように記述してくださいか。 クロスプラットフォームの機能ではなく、仕様に含まれていません。キャンバス要素のdrawWindowを探しています。次に、キャンバスをbase64/urlencodeしてサーバーに送信します。彼らはIE6のサポートのためにserverside黒い魔法でそれをバックアップ想像することができます..または彼らはgoogle + html5ブラウザのみのものを作る..

+2

私は全体が「」タグではないと思います。 –

+1

は、「新しい」Google画像サイトを見たことがありますか?百万のキャンバスタグのようなものです(明白な理由なしに)。それはキャンバスでなければなりません。なぜなら、クライアントサイドにウェブサイトの印刷画面を作る他の方法がないからです(あるいは、Googleの機能が何であるか、Jakob Cosoroabaが記述しているか理解していません)。 – japrescott

+0

私はキャンバスタグレンダリングされたコンテンツで私はいくつかを見逃しているかもしれませんが、間違いなくデータの一部は普通の古いHTMLです。 – Matt

0

それは、DOMツリー全体をサーバーに送信し、

+0

これは私の最初の考えでした.Googleにはサイトサーバー側の画像をレンダリングする方法があります。私はそれをテストしたいと思っていましたが、私はそれを捕まえるためにガベージフィードバックを送るつもりはありません。このメソッドの唯一の問題は、レンダリングのバグが表示されないことを意味します。 –

関連する問題