ブラウザコンテンツのスクリーンショットをキャプチャする（Webサイト）
私の目的はウェブサイトのイメージを持つことです（はい、それと同じくらい簡単です）。 html2canvas のようなツールがあることを私は知っています。ただし、クライアントブラウザでスクリーンショットをレンダリングしたくありません。
理由の1つは、chrome拡張子と webview を使用することです。これは、基本的にiFrameのように動作します。セキュリティ上の理由から、次のようなWebサイトのスクリーンショットをレンダリングします。 iFrameは機能しません。
私は彼らが ウェブサイトのスクリーンショットのキャプチャをネイティブにサポートする の機能に取り組んでいることも知っていますが、ブラウザの可能性に依存せずにクロスブラウザソリューションが必要です。これはすべてサーバー上で行われるため、コマンドラインから実行可能である必要があります。
私が今していることは：
- ブラウザを開くコマンドライン経由
- フォーカスをブラウザウィンドウに切り替えますコマンドライン経由
- スクリーンショットを作成します（Macではscreencapture、Linuxではscrot）コマンドライン経由
この基本的なレベルでそれを行うと、ステータスバーやブラウザプラグインなどを含む画像の欠点があります。実際、私は実際のウェブサイトコンテンツだけを持ちたいのですが、このアプリケーション固有のものはすべてありません。
- 最悪の解決策は、ウィンドウに対するコンテンツの0 | 0の位置をハードコーディングすることですすべてのブラウザーに対して。これはくだらないです（明らかな理由で）。
- 私が思いついた別の解決策は、ブラウザに（ソケットを介してプラグインと通信できます）、x：0; y：0;にQRコードのようなものを追加するように指示し、スクリーンショットを画像処理サーバーに送信することです。その後、QRコードを削除し、スクリーンショットを再度送信します。次に、0 | 0に関連するすべてのポイントを知っていますが、それもそれほどエレガントではありません。
最良の方法は、アプリケーションのどの部分の画像をキャプチャするかを何らかの方法で決定できるコマンドラインツールです。
例は Firefox用のこのプラグイン または このサーバー側ツール または this のような異なるブラウザとOSを備えたWebサイトのスクリーンショットを提供するこれらすべてのツールです。彼らはどのようにしてブラウザ固有のGUI要素を取り除くのだろうか。
追加：
これを十分に明確にしたかどうかはわかりませんが、特定のブラウザーのコンテンツのスクリーンショットが必要ですが、ブラウザー固有のGUI要素は含まれていません。つまり、ヘッドレスブラウザを実行しているアプリケーションは私には役に立たないということです。ヘッドレスブラウザには独自のエンジンがあるからです。具体的には、たとえばのスクリーンショットが欲しいです。 Firefoxバージョンx。
セレンについて知っていますか？これは、特定のブラウザを実際に開き、スクリプト化されたテストを実行するテストツールです。スクリーンショットの撮影にも使用できます。
Awesomescreenshot 実際にページを下にスクロールして実際のスクリーンショットを撮り、それらの画像を1つの長い画像にまとめます。表示されているページの一部、または選択したセクションのみをキャプチャするように設定することもできます。
これを Auto Hot Keys のようなマクロタイプのプログラム/スクリプト言語と組み合わせることができます。コマンドラインを使用するよりも簡単な場合とそうでない場合があります。それはあなたが何をしようとしているのかによると思います。
ほとんどのサーバーサイド言語はHTMLを提供するだけで、レンダリングすることはありません。しばらく前に、シングルページjavascriptアプリケーションのインデックス作成の問題に遭遇し、解決策の1つは phantomJS でした。
PhantomJSはまさにあなたが望むことをします。 HTML（サーブサイド）をレンダリングできます。Phantomにはキャンバスも組み込まれているため、それを使用してスクリーンショットを撮ることができます。 PhantomはWebkitであるため、一般的なブラウザー（Chrome、Safari、Opera）のほとんどをカバーします。 FirefoxでWebサイトがどのように表示されるかを確認したい場合は、 SlimerJS （PhantomJsに似ていますが、Geckoエンジンを実行します）を試すことができます。
これは、最も人気のあるすべてのブラウザー（IEを除く）をカバーします。これはまだヘッドレスソリューションですが、さまざまなレイアウトエンジンを見ることができます。 NodeJSが必要になり、少し学ぶかもしれませんが、どちらにもスクリーンショットのドキュメントがあります。幸運を！
ブラウザ、バージョン、OSプラットフォームの多くの組み合わせ
特定のブラウザとバージョンでウェブページのスクリーンショットをキャプチャするには、これらすべてのブラウザで起動、実行、キャプチャできるフレームワークが必要です。さらに、特定のプラットフォームで、上記のブラウザとバージョンと組み合わせて、 OSX、Windows、Linux、Androidなど。これらのプラットフォームのバージョンが異なると、可能な組み合わせがさらに増えます。
- これらのブラウザをセットアップし、維持する必要があります
- それらを駆動するためのフレームワークを見つけるか作成します。Seleniumはおそらくあなたの最善の策です
- 特定のブラウザ/ OSの組み合わせに対するSeleniumのサポートの欠如を克服します
- これを管理し、使用するためのNiceAPIのように公開するインフラストラクチャ
ただし、既存のソリューション、またはこれに関連するソリューションがあります。たとえば、次のとおりです。
特定のブラウザ、バージョン、プラットフォームなどでスクリーンショットキャプチャを取得することに関して。
http://browsershots.org/ は無料で、ブラウザコンボのセットがたくさんありますが、プログラムでアクセスできるかどうかはあまり明確ではありません。
これを行うには、既存のAPIを呼び出すだけです。
crossbrowsertesting.comは、すべての要件を満たしているように見える商用サービス（無料トライアル）です。
これを行うことができる技術を持っています
http://usersnap.com デスクトップとモバイルの両方で多くのブラウザをサポートし、サーバー上でピクセルパーフェクトなスクリーンショットを取得するために多くの作業を行っており、ユーザーが環境で表示するものと同じです。
エンジニアは要件としてソリューションに焦点を合わせます...
私たちのエンジニアリングタイプではよくあることですが、特定のソリューションを実装する方法に行き詰まります。これらのスクリーンショットを取得することでどのような問題が解決するのか、つまり根本的な要件は、質問では明確ではありません。それがわかっていれば、他のもっと簡単なアプローチが利用できるかもしれませんか？
オープンソースだけでなく、同じことをするために支払われるさまざまなツールがあります。ただし、セキュリティ上の理由を念頭に置いてください。 'ドライブに保存' Google自体による拡張機能を使用することをお勧めします。
これにより、スクリーンショットをGoogleドライブに直接保存するためのより安全な方法が提供され、スクリーンショットとともに、ユーザーは写真やその他のドキュメントをGoogleドライブに保存することもできます。
// 2番目の提案//
上記の拡張機能を使用したくない場合は、「Blipshot」を使用できます。これはオープンソースツールであり、GitHubでも入手できます。
// 3番目の提案//
3番目に良い解決策はフルページスクリーンキャプチャです。
この3つのツールは、Google Chromeおよび他のブラウザで最も評価の高いスクリーンショットツールの一部です。
お役に立てば幸いです。
それを行うには2つの方法があります。
- FirefoxまたはChrome用のプラグインを作成します
スクリーンショットは、ページ上にキャンバスオーバーレイを作成することによって取得されます。画像はドキュメントから取得されるため、ブラウザのUIは画像の一部ではありません。
- ブラウザを再作成します（PhantomJS、TrifleJS）
そもそもブラウザのUIはありません。
私は過去に XULRunner で運が良かった
ここで概説されているルーチンを試すことができます： https://blog.builtwith.com/2010/07/02/mozilla-automated-website-screen-grabber/
これは基本的にFirefoxのシェルを実行し、スクリーンショットを取得するプロセスを自動化します。微調整が必要かもしれませんが、書かれているとおりに要件を満たすことができると思います。