Googleの「バグの報告」または「フィードバックツール」を使用すると、ブラウザウィンドウの領域を選択して、バグに関するフィードバックとともに送信されるスクリーンショットを作成できます。
重複した質問に投稿されたJasonSmallによるスクリーンショット。
彼らはこれをどのようにやっていますか?GoogleのJavaScriptフィードバックAPIはここから読み込まれ、フィードバックモジュールの概要でスクリーンショット機能が示されます。
Googleの「バグの報告」または「フィードバックツール」を使用すると、ブラウザウィンドウの領域を選択して、バグに関するフィードバックとともに送信されるスクリーンショットを作成できます。
重複した質問に投稿されたJasonSmallによるスクリーンショット。
彼らはこれをどのようにやっていますか?GoogleのJavaScriptフィードバックAPIはここから読み込まれ、フィードバックモジュールの概要でスクリーンショット機能が示されます。
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/
Web アプリは、以下を使用して、クライアントのデスクトップ全体の「ネイティブ」スクリーンショットを取得できるようになりましたgetUserMedia()
。
この例を見てください:
https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/
クライアントは (今のところ) chrome を使用している必要があり、chrome://flags でスクリーン キャプチャ サポートを有効にする必要があります。