FirefoxのWebページ内にスクロール要素を含むスクリーンショットを撮るにはどうすればいいですか？
Webページ全体のスクリーンショットを撮る必要があります。トリックは、スクリーンに収まらない単一の要素の内容全体をスクリーンショットに含める必要があることです。
高さが原因でスクロールバーが表示されている単一列のテーブルです。これはIFRAMEではありません（独自のタブにロードするのは簡単です）。
列にはフォーマットされたテキストといくつかの小さな画像が含まれています。
スクロールする長いWebページの場合、このタスクを実行するのは簡単です。しかし、ページ内にスクロールする個々の要素が含まれている場合、どのようにしてそれを達成できますか？
明確にするために、要素自体だけでなく、ページ全体を取り込む必要があります。
私はこれをWindows上のFirefoxを使用して達成したいと思います。
私の提案は、 Firefoxの組み込み機能 を使用することです。これにより、単一のDOM要素のスクリーンショットを撮ることができます。
開発者ツールをポップで開く→要素を探す→右クリックしてスクリーンショットを撮る
これは私の社内サイトの1つでは動作しなかったので、すべてのサイトで動作するとは言えません。
OPの編集後に更新します。
以下に示すように、DOM要素のコンテンツ全体と共にページ全体を記録する場合は、DOM要素の高さをライブ編集する必要がありますが、...
ビューポートやスクリーンショットから多くのDOM要素をプッシュするか、他のツールではキャプチャできないことを私は思っています。
https://en.wikipedia.org/wiki/Screenshot から以下をお読みください
スクリーンショット、スクリーンキャプチャ、スクリーンキャップ、キャップ、スクリーンダンプ、またはスクリーングラブは、使用中のモニタ、テレビ、またはその他のビジュアル出力デバイスに表示されている目に見えるアイテムを記録するために人が撮った画像です。
私が本当にあなたのやり方でやらなければならないのであれば、GIFを作成するか、1ページに2つのスクリーンショットと1つのDOM要素のみを取り込んで1つに結合することにします。
開発者ツールバーからスクリーンショットコマンドを使用できます。
押す Shift + F2 ツールバーを開くか、またはWeb Developer Toolsメニューから選択します。
ツールバーにコマンド
screenshot --fullpage fullpage.pngを入力します。
単一の要素をキャプチャするには、そのCSSセレクタを--selectorフラグ付きで使用します。
screenshot --selector #hot-network-questions
下の画像が表示されます
Firefoxの レスポンシブデザインモード を使用し、幅を通常のものに、高さをページ全体を囲むのに十分な大きさに設定し、スクリーンショットボタン（カメラ）をクリックします。アイコン）。
あなたの問題を解決するかもしれない Snagit と呼ばれるソフトウェアがあります。このソフトウェアは、スクロールウィンドウのように、さまざまな種類のスクリーンショットを撮影したり、ビデオを録画したりすることができます。
これは有料アプリケーションですが、試用版もあります。
拡張 と呼ばれる Nimbus Screen Capture があり、これはこのタスクに最適です。
あなたは捕獲する選択肢があります：
- ページの表示部分（ではなくブラウザ要素を含めない場合に便利） alt+Print Scrn）
- ページの断片（これにより、必要な断片を見つけるために画面上の領域の上にカーソルを置くことができます。これらの領域は、基礎となるHTML要素に対応します）
- 選択した領域（手動でスクリーンショットを表示する場所をクリックしてドラッグします。ドラッグ中のスクロールがサポートされています）
- ページ全体
私は Screenpresso を使います。それはあなたがスクロールスクリーンショットを撮ることを可能にします。基本的にはスクリーンショットを撮り、下にスクロールして別のスクリーンショットを撮ります。その後、Screenpressoはそれらをステッチします。 Screenpressoも無料です。
参考までに、スクリーンショットをスクロールするためのショートカットキーは、WindowsKey + Shift + PrintScreenです。次にスクロールしたいウィンドウをクリックする必要があります。スクリーンショットの次の部分に移動したら、右クリック、スクロールダウン、右クリックなどします。あなたが終わったら、左クリックしてください、そして、彼らは一緒にステッチされるでしょう。ステッチプロセスがよりうまく機能するように、各スクリーンショットにある程度のオーバーラップを必ず入れてください。
すべてを1ページに収めるためのオプション：
- すべてを1ページに収めるには
<Ctrl>-を使用してください - 画面を縦モードにします
- 縦画面モードで2番目の画面を使用し、最初の画面の下に配置します
- 上記すべてを組み合わせる
もう1つの選択肢は、キャプチャしたいものの上部のスクリーンショットを撮ることです。下にスクロールして、次のスクリーンショットを撮ります。すべてをキャプチャするまでこれを繰り返します。
任意選択で、画像エディタ（例えば、gimp）を使用してスクリーンショットを１つの大きな画像にまとめる。
スクリーンショットを撮るには、簡単なスクリーンショットのようにExtensionを追加できます。それなら、スクリーンショットを撮るのがはるかに簡単になります。
DESKTOPプログラムでは、ウィンドウをスクロールさせながら ApowerSoftキャプチャ が私の仕事をしてくれました。