HTML5/Canvas/JavaScriptを使用したインブラウザ・スクリーンショットの撮影
Google'の「Report a Bug" or "Feedback Tool" 」では、ブラウザウィンドウの一部を選択してスクリーンショットを作成し、バグに関するフィードバックを送信することができます。
どのようにしているのでしょうか? Google'のJavaScriptフィードバックAPIは、こちらから読み込まれ、彼らのフィードバックモジュールの概要では、スクリーンショットの機能が示されています。
880
3
JavaScript は DOM を読み込んで、
canvas
を使ってかなり正確な表現をすることができます。私は、HTMLをcanvas画像に変換するスクリプトを作っています。今日、あなたが説明したようなフィードバックを送るために、それを実装することに決めました。このスクリプトでは、クライアントのブラウザで作成されたスクリーンショットをフォームと一緒に含むフィードバックフォームを作成することができます。スクリーンショットはDOMに基づいており、実際のスクリーンショットを作成するのではなく、ページ上で利用可能な情報に基づいてスクリーンショットを構築するため、実際の表現とは100%一致しないかもしれません。
また、画像全体がクライアントのブラウザ上で作成されるため、サーバーからのレンダリングは一切必要ありません。HTML2Canvas スクリプト自体はまだ非常に実験的な状態で、必要な CSS3 属性がほとんど解析されておらず、プロキシが利用できる場合でも CORS 画像の読み込みがサポートされていません。
また、ブラウザの互換性も非常に限られています(サポートできないものが増えたわけではなく、クロスブラウザに対応させるための時間がなかっただけです)。
詳しくは、こちらのサンプルをご覧ください。
http://hertzen.com/experiments/jsfeedback/
**編集しました。 html2canvas スクリプトは、個別に ここ といくつかの ここの例 で利用できるようになりました。
edit Google が非常に類似した方法を使用していることを確認するために、Google Feedback チームの Elliott Sprehn 氏によるプレゼンテーションを紹介します。 http://www.elliottsprehn.com/preso/fluentconf/
Webアプリケーションは、
getUserMedia()
を使って、クライアントのデスクトップ全体の「ネイティブ」なスクリーンショットを撮ることができます。この例を見てください。
https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/
クライアントは(現時点では)クロームを使用している必要があり、chrome://flagsでスクリーンキャプチャのサポートを有効にする必要があります。
Niklasが述べているように][1]、[html2canvas][2]ライブラリを使用して、ブラウザでJSを使ってスクリーンショットを撮ることができます。この点について、このライブラリを使ってスクリーンショットを撮る例を提供することで、彼の答えを拡張します。
onrendered
の
report()`関数では、データURIとして画像を取得した後、それをユーザに表示し、ユーザがマウスで「バグ領域」を描画できるようにして、スクリーンショットと領域の座標をサーバに送信することができます。この例][3]では、
async/await
バージョンが作成されました: 素敵な`makeScreenshot()関数[.UPDATE
スクリーンショットを撮り、地域を選択し、バグを記述し、POSTリクエストを送ることができるシンプルな例 ([こちらのjsfiddle][5]) (主な機能は
report()
) です。