Ich muss einen Screenshot einer ganzen Webseite machen. Der Trick dabei ist, dass der Screenshot den gesamten Inhalt eines einzelnen Elements enthalten muss, das nicht auf den Bildschirm passt.
Es handelt sich um eine einspaltige Tabelle, die aufgrund ihrer Höhe eine Bildlaufleiste hat. Es handelt sich nicht um ein IFRAME (das sich einfach in einer eigenen Registerkarte laden ließe).
Die Spalte enthält formatierten Text und einige kleine Bilder.
Bei langen Webseiten, die scrollen, ist diese Aufgabe ganz einfach. Aber wie kann sie ausgeführt werden, wenn die Seite ein einzelnes Element enthält, das scrollt?
Um es klar zu sagen: Ich muss die gesamte Seite erfassen, nicht nur das Element selbst.
Ich möchte dies mit Firefox unter Windows erreichen.
Antwort1
Mein Vorschlag ist, dieDie integrierte Funktion von FirefoxDamit können Sie Screenshots einzelner DOM-Elemente erstellen.
Öffnen Sie einfach die Entwicklertools → Suchen Sie das Element → Klicken Sie mit der rechten Maustaste und machen Sie einen Screenshot
Es hat auf einer meiner internen Sites nicht funktioniert, daher kann ich nicht sagen, dass es bei allen funktionieren wird.
Update nach der Bearbeitung des OP:
Wenn Sie die gesamte Seite zusammen mit dem gesamten Inhalt des DOM-Elements aufzeichnen möchten, wie unten gezeigt, sollten Sie die Höhe des DOM-Elements live bearbeitenAber...
Dadurch werden viele DOM-Elemente aus dem Ansichtsfenster und dem Screenshot geschoben, und meines Wissens nach kann kein anderes Tool sie erfassen, was aber, glaube ich, Ihren Zweck verfehlt.
Lesen Sie unten vonhttps://en.wikipedia.org/wiki/Screenshot
Ein Screenshot, eine Bildschirmaufnahme, ein Screencap, ein Screendump oder ein Screengrab ist ein Bild, das von einer Person aufgenommen wird, um die sichtbaren Elemente aufzuzeichnen, die auf dem Monitor, Fernseher oder einem anderen verwendeten visuellen Ausgabegerät angezeigt werden.
Wenn ich es wirklich auf Ihre Art machen müsste, würde ich entweder ein GIF erstellen oder zwei Screenshots machen, einen von der ganzen Seite und einen nur vom DOM-Element, um sie zu einem zusammenzuführen.
Antwort2
2021 Bearbeiten
Die Symbolleiste wurde aus FF entfernt. Sie können jedoch weiterhin auf die Befehle zugreifen, indem Sie sie in der Konsole mit einem vorangestellten eingeben :. Verwenden Sie also für Screenshots
:screenshot --fullpage fullpage.png
oder
:screenshot --selector #hot-network-questions fullpage.png
Alte Antwort
Sie können den Screenshot-Befehl aus der Entwickler-Symbolleiste verwenden:
Drücken Sie Shift+ F2, um die Symbolleiste zu öffnen, oder wählen Sie sie aus dem Menü „Web Developer Tools“ aus.
Geben Sie in der Symbolleiste den Befehl ein
screenshot --fullpage fullpage.png.
Um ein einzelnes Element zu erfassen, können Sie seinen CSS-Selektor mit dem Flag --selector verwenden, z. B.
screenshot --selector #hot-network-questions
erhalten Sie das folgende Bild
Antwort3
Mit FirefoxResponsive Design-Modus, stellen Sie die Breite auf einen normalen Wert und die Höhe so ein, dass sie ausreicht, um die gesamte Seite abzudecken. Klicken Sie dann auf die Schaltfläche „Screenshot“ (das Kamerasymbol).
Antwort4
ich benutzeSiebdruck. Damit können Sie einen Scroll-Screenshot erstellen. Im Grunde machen Sie einen Screenshot, scrollen nach unten und machen einen weiteren und so weiter, dann fügt Screenpresso sie zusammen. Screenpresso ist ebenfalls kostenlos.
Zu Ihrer Information: Die Tastenkombination zum Scrollen von Screenshots ist Windows-Taste+Umschalt+Druck. Sie müssen dann auf das Fenster klicken, durch das Sie scrollen möchten. Wenn Sie zum nächsten Teil des Screenshots gelangen, klicken Sie mit der rechten Maustaste, scrollen Sie nach unten, klicken Sie mit der rechten Maustaste und so weiter. Wenn Sie fertig sind, klicken Sie mit der linken Maustaste und die Screenshots werden zusammengefügt. Achten Sie darauf, dass sich die Screenshots etwas überlappen, damit der Zusammenfügungsprozess besser funktioniert.