Google の「バグの報告」または「フィードバック ツール」を使用すると、ブラウザ ウィンドウの領域を選択して、バグに関するフィードバックとともに送信するスクリーンショットを作成できます。
ジェイソン・スモールによるスクリーンショット、投稿：重複した質問。
どうやってこれを実現しているのでしょうか？GoogleのJavaScriptフィードバックAPIは、ここそしてフィードバックモジュールの概要スクリーンショット機能のデモンストレーションを行います。
ベストアンサー1
JavaScript は DOM を読み取り、 を使用してそのかなり正確な表現をレンダリングcanvasできます。私は HTML をキャンバス イメージに変換するスクリプトに取り組んでいます。今日は、あなたが説明したようにフィードバックを送信するように実装することにしました。
このスクリプトを使用すると、フォームとともにクライアントのブラウザで作成されたスクリーンショットを含むフィードバック フォームを作成できます。スクリーンショットは DOM に基づいており、実際のスクリーンショットを作成するのではなく、ページで利用可能な情報に基づいてスクリーンショットを作成するため、実際の表現と 100% 正確ではない可能性があります。
画像全体がクライアントのブラウザ上で作成されるため、サーバーからのレンダリングは必要ありません。HTML2Canvasスクリプト自体はまだ実験段階にあり、必要な CSS3 属性をほとんど解析しておらず、プロキシが利用可能であっても CORS イメージを読み込むサポートもありません。
ブラウザの互換性はまだかなり限られています (サポートできなかったわけではなく、より多くのクロスブラウザをサポートする時間がなかっただけです)。
詳細については、次の例をご覧ください。
http://hertzen.com/experiments/jsfeedback/
編集html2canvasスクリプトは別途利用可能になりましたここいくつかの例はこちら。
編集 2 Google が非常によく似た方法を使用していることのもう一つの確認 (実際、ドキュメントに基づくと、唯一の大きな違いは、トラバース/描画の非同期メソッドです) は、Google フィードバック チームの Elliott Sprehn による次のプレゼンテーションで確認できます。http://www.elliottsprehn.com/preso/fluentconf/