Wie erstelle ich einen Screenshot mit einem Bildlaufelement auf einer Webseite in Firefox?

Ich muss einen Screenshot einer gesamten Webseite machen. Der Trick ist, dass ich den Screenshot brauche, um den gesamten Inhalt eines einzelnen Elements einzuschließen, das nicht in den Bildschirm passt.

Es handelt sich um eine einspaltige Tabelle, die aufgrund ihrer Höhe eine Bildlaufleiste aufweist. Es ist kein IFRAME (der einfach in einen eigenen Tab geladen werden kann).

Die Spalte enthält formatierten Text und einige kleine Bilder.

Für lange Webseiten, die einen Bildlauf durchführen, ist es trivial, diese Aufgabe auszuführen. Aber wie kann es erreicht werden, wenn es ein einzelnes Element innerhalb der Seite enthält, die einen Bildlauf durchführt?

Um klar zu sein, muss ich die gesamte Seite erfassen, nicht nur das Element selbst.

Ich möchte dies mit Firefox unter Windows erreichen.

Mein Vorschlag ist, die in Firefox integrierte Funktion zu verwenden , mit der Sie Screenshots eines einzelnen DOM-Elements machen können.

Öffnen Sie einfach die Entwickler-Tools → Finden Sie das Element → Klicken Sie mit der rechten Maustaste und machen Sie einen Screenshot

Es hat auf einer meiner internen Websites nicht funktioniert, kann also nicht sagen, dass es für alle funktionieren wird.

Update nach OP's Edit:

Wenn Sie beabsichtigen, eine ganze Seite zusammen mit dem gesamten Inhalt des DOM-Elements wie unten gezeigt aufzunehmen, sollten Sie die Höhe des DOM-Elements live bearbeiten, aber ...

Es wird eine Menge DOM-Elemente aus dem Ansichtsfenster und dem Screenshot entfernen, oder AFAIK wird es von keinem anderen Tool erfasst, was Ihrer Meinung nach Ihren Zweck übertrifft.

Lesen Sie unten von https://en.wikipedia.org/wiki/Screenshot

Ein Screenshot, eine Bildschirmaufnahme, eine Bildschirmkappe, eine Kappe, ein Bildschirmabzug oder ein Bildschirmabzug ist ein Bild, das von einer Person aufgenommen wurde, um die sichtbaren Elemente aufzuzeichnen, die auf dem Monitor, dem Fernseher oder einem anderen verwendeten visuellen Ausgabegerät angezeigt werden.

Wenn ich es wirklich so machen müsste, würde ich entweder ein GIF erstellen oder zwei Screenshots einer ganzen Seite und eines nur des DOM-Elements machen, um sie zu einem zusammenzuführen.

Sie können den Befehl screenshot in der Developer Toolbar verwenden:

1. Drücken Sie Shift+ F2, um die Symbolleiste zu öffnen, oder wählen Sie sie im Menü Web Developer Tools aus.

2. 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

screenshot --selector #hot-network-questions

erhalten Sie das Bild unten

Verwenden Sie den Responsive Design-Modus von Firefox , stellen Sie die Breite auf einen normalen Wert und die Höhe so ein, dass die gesamte Seite angezeigt wird. Klicken Sie auf die Screenshot-Schaltfläche (das Kamerasymbol).

Es gibt eine Software namens Snagit , die Ihr Problem lösen kann. Diese Software kann den Screenshot in verschiedenen Arten aufnehmen, z. B. als Scroll-Fenster, und auch Videos aufnehmen.

Es ist eine kostenpflichtige Anwendung, es steht jedoch auch eine Testversion zur Verfügung.

Ich benutze Screenpresso . Hier können Sie einen Screenshot mit Bildlauf machen. Grundsätzlich machst du einen Screenshot, scrollst nach unten und nimmst einen anderen usw., dann näht Screenpresso sie zusammen. Screenpresso ist ebenfalls kostenlos.

FYI, die Tastenkombination zum Scrollen von Screenshots ist WindowsKey + Shift + PrintScreen. Sie müssen dann auf das Fenster klicken, in dem 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 sie werden zusammengenäht. Stellen Sie sicher, dass jeder Screenshot etwas überlappt, damit der Nähvorgang besser funktioniert.

Es gibt eine Erweiterung namens Nimbus Screen Capture, die perfekt für diese Aufgabe geeignet ist.

Sie haben die Möglichkeit zu erfassen:

• der sichtbare Teil der Seite (nützlich, um die Browser-Elemente im Gegensatz zu alt+ nicht einzuschließen Print Scrn)
• ein Fragment der Seite (wobei Sie den Mauszeiger über Regionen auf dem Bildschirm halten können, um das gewünschte Fragment zu finden - diese Regionen entsprechen den zugrunde liegenden HTML-Elementen)
• ausgewählter Bereich (Sie klicken und ziehen manuell an die Stelle, an der Sie den Screenshot sehen möchten, unterstützt das Scrollen beim Ziehen)
• die gesamte Seite

Optionen, um alles auf eine Seite zu bringen:

• Damit <Ctrl>-passt alles auf eine Seite
• Drehen Sie Ihren Bildschirm in den Hochformatmodus
• Verwenden Sie einen zweiten Bildschirm im Hochformat und suchen Sie ihn unter dem ersten
• Kombinieren Sie alle oben genannten

Eine andere Möglichkeit ist, einen Screenshot des oberen Teils dessen zu machen, was Sie erfassen möchten. Scrollen Sie nach unten und machen Sie die nächste Bildschirmaufnahme. Wiederholen Sie diesen Vorgang, bis Sie alles erfasst haben.
Optional: Kombinieren Sie die Screenshots mit einem Bildeditor (z. B. gimp) zu einem großen Bild.

Um Screenshots zu machen, können Sie eine Erweiterung wie einen einfachen Screenshot hinzufügen. Dann ist es für Sie viel einfacher, Screenshots zu machen.

Bei DESKTOP-Programmen hat ApowerSoft capture mit Bildlauffenster den Job für mich erledigt.