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


97

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


OSのdpi設定を切り替えてみてください。Windows 8では、レジストリ値を変更する必要があると思います。これにより巨大なデスクトップが得られますが、もちろんフォントも拡大縮小するため、テキストを読むために目をさらに緊張させる必要があります。
ジグガンジャー

回答:


104

Firefoxと2つの拡張機能(Web DeveloperFireShot)で実行できます。

両方の拡張機能をインストールしたら、ツール-Web開発者-サイズ変更-サイズ変更ディメンションの編集...に移動します。

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

代替テキスト

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

代替テキスト


@snark-まあ、それはほとんど機能しました。しかし、Web Developer拡張機能では、ビューポートを画面より大きくすることはできません...?
ジョシュアカーモディ

@ジョシュア:それは私のためにうまく動作します。回答を投稿する前にテストしました。新しいテストを行いましたが、そのような大きなイメージをホストする場所が見つかりませんでした
Snark

1
更新:画面よりもウィンドウを大きくできないという問題は、Windows OS自体によって課せられた制限のようです。
ジョシュアカーモディ

@snark-実行しているOSを尋ねても構いませんか?
ジョシュアカーモディ

2
@スナーク-ああ。多分それはWindows XPのことでしょう(それが私がここで行き詰まっていることです)。いずれにせよ、FireBugを使用して、style = "width:4000px; height:3000px;"でDIVを挿入することで回避できます。HTMLコードに追加し、FireShotを使用します。FireShotを指摘してくれてありがとう。それは私に人生をずっと楽にしてくれます。以前は、手動で合成するよりもスクロールしてスクリーンショットを撮っていました。それは大きな痛みでした。
ジョシュアカーモディ

19

その間(少なくとも1、2年-バージョン15以降、私が間違っていなければ)、Firefoxは統合開発者ツールを介してこれを直接サポートします。

ストライプメニューの[ 開発ツール ]アイコンからCtrlShift M[ レスポンシブデザインビュー]を選択するか、選択します。

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

ここに画像の説明を入力してください


1
あなたがズームのHi-dpiの画像をシミュレートしているときのスクリーンショットボタンが正しく動作しない場合があります。その場合には、開発者ツールバーの開くShift+をF2して貼り付けscreenshot --clipboard --fullpage、「コンソール」へ。これは、通常のJSコンソールとは異なります。
ブレード

これは、Chrome開発者コンソールのデバイステストモードでも機能します。スクリーンショットオプションは、右上のドロップダウンメニューにあります。
タリー

残念ながら、これはChromeでは機能しないようです。Microsoft FlowのChromeでフルビューポートのスクリーンショットを撮ろうとしました(Firefoxのフルビューポートのスクリーンショット方式は機能しますが、FirefoxではFlowが正しく表示されないため)、現在表示されているスペースのスクリーンショットのみを撮りました...言い換えると、Chromeの「スクリーンショットをキャプチャする」オプションと「フルサイズのスクリーンショットをキャプチャする」オプションの間に違いはありませんでした。
タイラーH


6

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

ScreenGrabは同じことを行うように見えます。


5

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

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

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

resize to 5000 5000

このコマンドを使用した画面キャプチャ:

screenshot output.png

4

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

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


3

頻繁に行う必要がなければ、ブラウザプラグインをインストールするよりもthumbalizrなどのオンラインサービスを使用する方が簡単だと思います。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.