[解決済み] HTML5/Canvas/JavaScriptを使用してブラウザ内のスクリーンショットを撮影する

質問

Googleの「バグ報告」または「フィードバック ツール」では、ブラウザ ウィンドウの任意の領域を選択してスクリーンショットを作成し、バグに関するフィードバックと一緒に送信することができます。

<サブ に投稿されたJason Smallのスクリーンショット。 重複した質問 .

どのように行っているのでしょうか？ GoogleのJavaScriptフィードバックAPIは、以下の場所から読み込まれます。 ここで と フィードバックモジュールの概要 は、スクリーンショット機能のデモンストレーションを行います。

解決するには？

JavaScript は DOM を読み、それをかなり正確にレンダリングするために canvas . 私は、HTMLをキャンバス画像に変換するスクリプトに取り組んでいます。今日、あなたが説明したようなフィードバックを送るための実装をすることに決めました。

このスクリプトでは、クライアントのブラウザ上で作成されたスクリーンショットをフォームと一緒に含むフィードバックフォームを作成することができます。スクリーンショットはDOMに基づいており、実際のスクリーンショットを作成するのではなく、ページ上で利用可能な情報に基づいてスクリーンショットを構築するため、実際の表現に100%正確でない可能性があります。

それは サーバーからのレンダリングを必要としない 画像全体はクライアントのブラウザ上で作成されるからです。HTML2Canvas スクリプト自体はまだ非常に実験的な段階にあり、私が望むような CSS3 属性の解析や、プロキシが利用可能な場合でも CORS 画像を読み込むためのサポートはほとんどありません。

ブラウザの互換性はまだかなり限られています（もっと対応できないわけではなく、もっとクロスブラウザに対応させる時間がなかっただけです）。

詳しくは、こちらのサンプルをご覧ください。

http://hertzen.com/experiments/jsfeedback/

編集 html2canvas スクリプトを別途用意しました。 こちら といくつかの の例はこちら .

編集2 Googleが非常によく似た方法（実際、ドキュメントによると、唯一の大きな違いはトラバース/描画の非同期方法です）を使用していることを確認するために、Google FeedbackチームのEliott Sprehnによるプレゼンテーションがあります。 http://www.elliottsprehn.com/preso/fluentconf/