web-dev-qa-db-ja.com

Firefoxで高解像度のスクリーンショットを作成できますか？

Firefoxでは、Web開発者ツールバーに移動するとフルページのスクリーンショットを作成できます（開発者ツールの設定でアクティブ化できます）。残念ながら、これはデフォルトの解像度でのみ実行できます。とにかく高解像度の画像を取得する機会はありますか？ Firefoxまたはアドオンを使用しますか？または、別のブラウザで可能ですか？

firefoxscreenshothigh-resolutionwebpage-screenshot
13
robsch

Firefox62以降

Firefox 62以降では、GCLIが削除され、 スクリーンショットコマンドがWebコンソールに移動され、コロンが前に付けられました 。

ネイティブ画面解像度の4倍でスクリーンショットを撮るには、Webコンソールを開きます（Tools-> Web Developer-> Web Consoleまたは CtrlShiftK、 CmdOptionK Macの場合）および入力：

:screenshot --dpr 4

ファイル名はオプションになり、コンソールはファイルが保存された場所を通知します（通常は「ダウンロード」でシステム固有の命名スキームを使用）。

追加のパラメーターを使用できます。詳細については、 Webコンソールのドキュメント および Erik Meyerのブログ投稿 を参照してください。

追記：大きなDPR値が常に機能するとは限りません。 120メガピクセル程度の制限があるようです。大きなスクリーンショットは単純に完成せず、何もしません。コマンドで何も起こらない場合は、何かが出るまで、dprを下げるか、ウィンドウのサイズを変更してみてください。

9
Calimo

Firefoxでは、次のトリックを使用します。

  • Shift-F7（または[ツール]メニュー-> Web開発者->スタイルエディターに移動）そしてこれらの行を挿入してページ全体をズームします（ここでは、 4または400％で、たとえば72dpiは288dpiになり、印刷可能な画像に近づきます）：
body {
  zoom: 4;  /* change zoom factor here... */
  -moz-transform: scale(4);  /* ...and here. */
  -moz-transform-Origin: 0 0;
}
  • 次にShift + F2（または「ツール」> Web開発者>開発者ツールバー）、そして下部の小さなプロンプトで：
screenshot --fullpage
// or, directly into the clipboard instead of a png in the download folder
screenshot --fullpage --clipboard

[ツール]> [Web開発者]> [レスポンシブデザインビュー]（またはCtrl + Shift + M）で遊ぶこともできます。これにより、カスタム解像度を指定して、スクリーンショットを撮るには気の利いたボタンですが、ズームは手動で行う必要があります。

ズーム率を選択するときは注意してください。大きすぎるPNGを生成しようとすると、Firefoxは不機嫌になります。非常に高い解像度では、-fullpageオプションを削除し、フラグメントごとにスクリーンショットを作成して、画像エディタで再アセンブルする必要があります。

参照：最初のトリックを取得しました Webページ全体をCSSでスケーリングするにはどうすればよいですか？ ：FirefoxにはまだズームCSSルールに問題があるようですので、-moz-*ルールを追加する必要があります、少なくともバージョン38まで。これが将来のバージョンで修正される場合は、zoom: NN;を指定するだけです。

10
Chl

私は素晴らしい答えを見つけました スーパーユーザーで ちょうどいいパラメータを使用します。開発者コンソールで（[〜＃〜] shift [〜＃〜]+F2）使用：

screenshot filename.png --dpr 4

これにより、スクリーンショットの解像度が4倍になります。

7
fineliner

上記の回答とコメントを組み合わせると、Firefoxでshift + F2を押すことにより、Webページ全体の適切な解像度のスクリーンショットを取得できます。次に、コンソールが画面の下部にポップアップしたら、次のように入力します。

screenshot --fullpage --dpr 4 filename.png

Windows 10では、デフォルトでそのfilename.pngがC:\Users\yourusername\Downloadsフォルダーに保存されます。指定するには、円記号を2倍にする必要があります。

screenshot --fullpage --dpr 4 C:\\Users\\yourusername\\path\\to\\filename.png

1
r3robertson