web-dev-qa-db-ja.com

WebサイトをJavaScriptクライアントサイドでスクリーンショットする方法/ Googleがどのようにしたか(HDDにアクセスする必要はありません)

私はページをレンダリングし、クライアント(ブラウザ)側でスクリーンショットを作成する必要があるWebアプリケーションに取り組んでいます。

スクリーンショットをローカルのHDDに保存する必要はありません。ただRAMに保存し、後でアプリケーションサーバーに送信するだけです。

私が調べた:

  1. BrowserShotsに似たサービス...
  2. 機械化されたブラウザ...
  3. wkhtmltoimage ...
  4. Python WebKit2PNG ...

しかし、これらのどれも私に必要なものすべてを与えてくれません。

  1. ブラウザ側で処理します(ページのスクリーンショットを生成します)。 HDDに保存する必要はありません。ただ….
  2. ...さらに処理するために画像をサーバーに送信します。
  3. ページ全体をキャプチャする(表示部分だけでなく)

やがて私はグーグルのフィードバックツールにたどり着いた(これを見るにはYouTubeのフッターの "feedback"をクリックする)。それは JPGエンコーディング用のJavaScript と私が正確にそれらが何をするのか決定できない2つの他の巨大なスクリプトを含みます...

しかし、それはクライアント側で処理されます - そうでなければコードにこの巨大なJPEGエンコーダを入れても意味がありません!

誰がどうやってそれを作ったのか、私はどうやってそれを作ることができるのか、誰かに何か考えがありますか?

これがフィードバックの例です(一部の画面でバグを報告する)。

Feedback/report bug example

204

HTML5/Canvas/JavaScriptを使ってスクリーンショットを撮る "あなたの問題に答えます。

JavaScript/Canvasを使って仕事をすることができますが、まだ実験的です。

70
Vaibhav Garg

JWTで保護されているAngularを多用するページ上のdivをスナップショットで作成する必要がありました(私が書いたWebアプリケーションの場合)。

私は上記の方法のどれでも運がなかった。

必要なdivのouterHTMLを取得し、それを少し(*)クリーンアップしてから、それをwkhtmltopdfを実行しているサーバーに送信しました。

これはうまくいきました非常に私にとってはうまくいきました。

(*)私のページのさまざまな入力デバイスがチェックされたようにレンダリングされなかったり、PDFで表示されたときにテキスト値を持っていなかった。例:テキスト入力項目の場合 - 私はそれらの.val()を 'value'属性にコピーします。これはwkhtmlpdfで見ることができます。

14
Al Joslin

SnapEngageJavaアプレットを使ってこのサービスを提供します。あなたは彼らの製品を使うことができます Snapabug または情報を使ってそれらの機能を作り直すことができます ここ 。それについても読むことができます ここ

4
oxyacanthous