web-dev-qa-db-ja.com

ブラウザーがサポートしている解像度よりも高い解像度でブラウザーのスクリーンショットを撮るにはどうすればよいですか?

非常に高解像度のモニターに表示されるWebサイトのスクリーンショットを撮る必要があります。たとえば、4000x3000ピクセルです。私のラップトップの画面のネイティブ解像度は1400x768です。基本的に、モニターとビデオカードが実際にサポートしているよりもはるかに高いモニター解像度をシミュレートする必要があります。サイトのスクリーンショットは、FirefoxでCTRL MINUS(ズームアウト)を繰り返し押したときのように見えますが、スケーリングによるピクセルの損失はありません。これどうやってするの?仮想マシンソフトウェアを使用して超高解像度のディスプレイをシミュレートする方法はありますか?そうでない場合、画面よりも大きなブラウザウィンドウを開いて、そのコンテンツをPNGとしてキャプチャする方法はありますか?うまくいくかもしれない何か他に?

98
Joshua Carmody

Firefoxと2つの拡張機能でそれを行うことができます: Web DeveloperFireShot

両方の拡張機能がインストールされたら、[ツール]-[Web開発]-[サイズ変更]-[サイズ変更の編集...]に移動します。

新しいサイズ4000 x 3000を追加します。ページコンテンツのみを4000x3000にする場合は、[ビューポートのサイズ変更]をオンにします。チェックしない場合、Firefoxのウィンドウ全体(ツールバー、メニューなど)がこの寸法に設定されます。

alt text

適切なサイズになったら、[ツール]-[FireShot]-[ページ全体をキャプチャ]に移動します。保存などのアクションを選択します。 Web開発者が設定したページコンテンツを目的のサイズに保存します。

alt text

106
Snark

一方(少なくとも1〜2年-バージョン15以降、私が誤解しない限り)、Firefoxは統合開発者ツールを介してこれを直接サポートしています。

どちらかヒット CtrlShiftM またはストライプメニューのDeveloper ToolsアイコンからResponsive Design Viewを選択します。

これにより、このビューが表示され、プリセットのセットから選択したり、希望する解像度を入力したりできますandワンクリックでスクリーンショットをPNG形式でディスクに直接保存します。

enter image description here

19
Damon

Macでは、 Paparazzi が役立ちます。GUIを使用するか、次のようなURL構文を使用します。

paparazzi:(width = 4000、height = 3000、maxheight = 3000) ブラウザのスクリーンショットを、ブラウザがサポートしているよりも高い解像度で取得するにはどうすればよいですか?

enter image description here

URL構文は簡単に ブックマークレットに変換 にできます。 PaparazziはWebKitレンダリングエンジンを使用しています。

8
Arjan

FireFoxアドオンと呼ばれる Abduction を使用して、Webページ全体の.pngショットを作成します。残念ながら、そのアドオンはまだFireFox 3.6と互換性があるように更新されていません。

ScreenGrab も同じように動作します。

6
Zooks64

Firefox 16以降には、開発者コンソールでビューポートのサイズを制御する機能が含まれています。

ツールを開く... Web開発者...開発者ツールバー

次のコマンドでビューポートのサイズを変更します。

resize to 5000 5000

このコマンドを使用した画面取り:

screenshot output.png
5
Wayne Piekarski

まあ、Linux(または任意のフレーバーのX Window Systemセットアップ)を使用すると、モニターよりも大きい仮想デスクトップを設定できます。その中をスクロールしますが、ブラウザを最大化してスクリーンショットを撮ることができると思います。

WindowsまたはOS Xでそれを行う方法があるかどうかはわかりません。

5
Ronald Pottol

thumbalizr のようなオンラインサービスを使用すると、ブラウザプラグインをインストールするよりも簡単です。

3
svick

Chromeには、次のようないくつかの拡張機能があります。

別のウェブページのスクリーンショットがありますが、3つ以上のリンクを公開するほどの評判はありません

1
titusfx