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

70

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.

— RockPaperLizard
quelle

2

Haben Sie schon einmal darüber nachgedacht, die Seite als PDF zu speichern? Der Haken bei dieser Methode ist, dass einige Websites eine „Druckansicht“ haben, die das PDF enthält, aber in einigen Fällen kann diese Technik funktionieren.

— JakeGould

@ JakeGould Danke Jake. Würde das funktionieren, um innerhalb einer Seite zu scrollen und zu elementieren?

— RockPaperLizard

Welp, ich habe den Teil über das Bildlaufelement verpasst. Das ist zu eigenwillig, als dass ich es kommentieren könnte. Ich kann nur nicht sicher sein, dass die PDF-Druckmethode funktioniert. Viel Glück mit anderen hier vorgestellten Ideen.

— JakeGould

Möglicherweise nützlich: Firefox-Plugin zum Speichern der gesamten gerenderten Seite als Bild in den Software-Empfehlungen .

— ein Lebenslauf vom

Wenn ich das richtig verstehe, wird das betreffende Bildlaufelement wahrscheinlich auf weniger als die volle Höhe gezwungen. Es kann hilfreich sein, das Attribut height style für dieses Element auf auto zu setzen.

— Tehwalris

86

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.

— Wortspiel
quelle

Vielen Dank für Ihre Antwort (und tolles Bild!), Aber dies beantwortet leider nicht die Frage. Ich muss einen Screenshot der gesamten Seite einschließlich des Elements machen, nicht nur des Elements selbst.

— RockPaperLizard

5

@RockPaperLizard @puns Antwort beantwortet Ihre Frage tatsächlich ... er hat sie einfach nicht auf Ihren Anwendungsfall angewendet. Sie können seiner Antwort folgen, aber wählen Sie das <body>Element aus, und Sie erhalten den gewünschten Screenshot.

— Digital Chris

2

Wenn Sie die Höhe des DOM-Elements so bearbeiten, dass keine internen Bildlaufleisten vorhanden sind, sollten Sie FireShot verwenden, um die gesamte Seite zu erfassen.

Ich konnte einen Screenshot wie diesen bekommen, aber keinen mehr. Es erzeugt immer noch den Kameraverschlusston, legt einfach nichts in die Zwischenablage. Gleiches gilt für den Befehl in der Entwicklersymbolleiste, es wird keine Datei erstellt.

— MrFox

@MrFox Im Ordner "Downloads" wird eine PNG-Datei erstellt.

— AxiomaticNexus

24

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

Drücken Sie Shift+ F2, um die Symbolleiste zu öffnen, oder wählen Sie sie im 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

screenshot --selector #hot-network-questions

erhalten Sie das Bild unten

— topher
quelle

4

@RockPaperLizard Ich habe einen anderen Beitrag mit der gleichen Antwort gefunden und OP wurde von Ihnen bearbeitet.

— Wortspiel

@ Wortspiel Danke. Aber ich muss einen Screenshot der gesamten Seite mit dem erweiterten Element machen, nicht nur das Element selbst.

— RockPaperLizard

Ich konnte einen Screenshot wie diesen bekommen, aber keinen mehr. Es wird immer noch der Kameraverschlusston ausgegeben, nur nicht die Datei. Gleiches gilt für das Klicken mit der rechten Maustaste auf das Element im Entwicklermodus und das Kopieren auf diese Weise. Es wird kein Bild in die Zwischenablage verschoben.

— MrFox

8

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

— Ouroborus
quelle

4

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.

— Gurumurthy.G
quelle

Wenn Sie dies als Antwort finden, markieren Sie es und schreiben Sie es in den Kommentar. Was bedeutet das?

— AL

3

@AL Dieser Benutzer verfügt nicht über genügend Repräsentanten für einen Kommentar, sodass er eine Antwort in der Hoffnung bereitgestellt hat, dass er von einem Moderator in einen Kommentar umgewandelt wird.

— MonkeyZeus

Ich benutze SnagIt seit Jahren. Es ist eine sehr nützliche Software.

— Roy Tinker

2

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.

— garethb
quelle

1

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

— Keith Hall
quelle

Vielen Dank für Ihre Antwort, ich weiß das zu schätzen. Leider sieht es nicht wie Nimbus Screen Capture können den gesamten Inhalt eines Scrolling erfassen Element innerhalb einer Seite. Könnten Sie, wenn ich mich irre, näher erläutern, wie dies mit diesem Tool erreicht werden kann?

— RockPaperLizard

@RockPaperLizard Sie haben Recht, es scheint dies nicht zu unterstützen. Ich hatte gedacht, dass der Fragmentmodus Bildlaufelemente abdecken würde oder dass der ausgewählte Bereichsmodus funktionieren würde. Während das Fenster in diesem Modus gescrollt werden kann, scheint es jedoch so zu sein Die Bildlaufelemente können nicht.

— Keith Hall

Vielen Dank für die Bestätigung, dass ich es nicht gesehen habe. Vielleicht werden sie diese Funktionalität einer zukünftigen Version hinzufügen.

— RockPaperLizard

0

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.

— NZD
quelle

1

Bis ich zu Punkt 4 kam, dachte ich, Sie schlagen nur vor, alle Punkte zu kombinieren! Ich stellte mir vor, 20 Bildschirme zu haben und sie übereinander zu stapeln ... LOL. Dann bin ich zu # 4 gekommen und habe erfahren, dass Sie die Gegenstände einzeln oder kombiniert verwenden wollen.

— RockPaperLizard

Wenn Sie die Seite verkleinern, können Sie sie jedoch nicht ohne Verzerrung verkleinern.

— NiCk Newman

0

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.

— user606374
quelle

0

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

— T.Todua
quelle