Wie mache ich einen Screenshot mit einem Bildlaufelement innerhalb einer Webseite in Firefox?

68859
RockPaperLizard

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

Es ist eine einspaltige Tabelle, die aufgrund ihrer Höhe eine Bildlaufleiste hat. Es ist kein IFRAME (das auf seiner eigenen Registerkarte einfach zu laden wäre).

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

Bei langen blätternden Webseiten ist es einfach, diese Aufgabe auszuführen. Aber wie kann es erreicht werden, wenn es ein einzelnes Element innerhalb der Seite enthält, das scrollt?

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

Ich möchte dies mit Firefox unter Windows tun.

67
Überlegen Sie schon einmal, die Seite als PDF zu speichern? Der Haken bei dieser Methode besteht darin, dass einige Websites eine „Druckansicht“ haben, die das PDF enthalten wird. In einigen Fällen kann diese Technik jedoch funktionieren. JakeGould vor 7 Jahren 2
@ JakeGould Danke Jake. Würde das funktionieren, um innerhalb einer Seite zu scrollen und Elemente zu erstellen? RockPaperLizard vor 7 Jahren 0
Welp, verpasste den Teil über das Bildlaufelement. Das ist zu idiosynkratisch, als dass ich etwas dazu sagen könnte. Alles, was ich sagen kann, ist, dass ich jetzt nicht sicher sein kann, dass die PDF-Druckmethode funktioniert. Viel Glück mit anderen hier vorgestellten Ideen. JakeGould vor 7 Jahren 0
Möglicherweise nützlich: [Firefox-Plugin zum Speichern der gesamten gerenderten Seite als Bild] (https://softwarerecs.stackexchange.com/q/4448/1813) in [softwarerecs.se]. a CVn vor 7 Jahren 0
Wenn ich es richtig verstanden habe, wird das betreffende Bildlaufelement wahrscheinlich auf weniger als seine volle Höhe gezwungen. Wenn Sie das Höhenstilattribut für dieses Element auf auto setzen, kann dies hilfreich sein. tehwalris vor 7 Jahren 0
Bei meiner Arbeit gibt es ein Werkzeug namens SnagIt, das dies tun wird (glaube ich). Steve vor 7 Jahren 0
@tehwalris Das ist eine großartige Idee. Vielen Dank! Ich werde es auch versuchen. Ich könnte sogar ein CSS-Overlay erstellen, um dies automatisch durchzuführen. RockPaperLizard vor 7 Jahren 0

8 Antworten auf die Frage

84
pun

Mein Vorschlag ist die Verwendung der integrierten Funktion von Firefox, mit der Sie Screenshots eines einzelnen DOM-Elements aufnehmen können.

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

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

Update nach OP's Edit:

Wenn Sie die gesamte Seite mit dem gesamten DOM-Element-Inhalt wie unten gezeigt aufnehmen möchten, sollten Sie die Höhe des DOM-Elements live bearbeiten, aber ...

Es wird eine Menge DOM-Elemente aus dem Ansichtsfenster und Screenshot schieben, oder AFAIK wird von keinem anderen Tool erfasst, was Ihren Zweck erfüllt, denke ich.

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

Ein Screenshot, ein Screenshot, ein Screen Cap, ein Cap, ein Screen Dump oder ein Screengrab ist ein Bild, das von einer Person aufgenommen wird, um die auf dem Monitor, dem Fernseher oder einem anderen visuellen Ausgabegerät angezeigten sichtbaren Elemente aufzuzeichnen.

Wenn ich es wirklich so machen müsste, würde ich entweder eine GIF erstellen oder zwei Screenshots machen, eine ganze Seite und nur das DOM-Element, um sie zu einem zusammenzufügen.

Vielen Dank für Ihre Antwort (und ein tolles Bild!), Aber leider beantwortet dies die Frage nicht. Ich muss einen Screenshot der gesamten Seite einschließlich des Elements erstellen, nicht nur des Elements selbst. RockPaperLizard vor 7 Jahren 0
@RockPaperLizard eigentlich @ pun's answer Beantwortet Ihre Frage ... er hat sie einfach nicht auf Ihren Anwendungsfall angewendet. Sie können seiner Antwort folgen, aber wählen Sie das Element `` aus, und Sie erhalten den gewünschten Screenshot. Digital Chris vor 7 Jahren 5
Wenn Sie die Höhe des DOM-Elements bearbeiten, sodass keine internen Bildlaufleisten vorhanden sind, verwenden Sie FireShot, um die gesamte Seite zu erfassen. Dies sollte funktionieren. vor 7 Jahren 2
Ich konnte einen Screenshot so bekommen, aber nicht mehr. Es erzeugt immer noch den Auslösegeräusch der Kamera, es wird nichts in die Zwischenablage eingefügt. Dasselbe gilt für den Befehl in der Symbolleiste des Entwicklers. Es wird keine Datei erstellt. MrFox vor 6 Jahren 0
24
topher

Sie können den Screenshot-Befehl von der Developer Toolbar aus 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

enter image description here

@RockPaperLizard Ich habe [einen anderen Beitrag] (http://softwarerecs.stackexchange.com/a/10331) mit derselben Antwort gefunden und das OP wurde von Ihnen bearbeitet. pun vor 7 Jahren 4
@pun Danke. Ich muss jedoch einen Screenshot der gesamten Seite mit erweitertem Element erstellen, nicht nur das Element selbst. RockPaperLizard vor 7 Jahren 0
Ich konnte einen Screenshot so bekommen, aber nicht mehr. Es erzeugt immer noch den Verschlussgeräusch der Kamera, nur nicht die Datei. Dasselbe gilt für das Klicken mit der rechten Maustaste auf das Element im Entwicklermodus und das Kopieren auf diese Weise. Es wird kein Bild an die Zwischenablage gesendet. MrFox vor 6 Jahren 0
8
Ouroborus

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

4
Gurumurthy.G

Es gibt eine Software namens Snagit, die Ihr Problem lösen kann. Diese Software kann den Screenshot in verschiedenen Arten aufnehmen, z. B. in einem Bildlauffenster, und Video aufnehmen.

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

* Wenn Sie dies als Antwort finden, markieren Sie es und posten Sie es in einem Kommentar. * Was bedeutet das? A.L vor 7 Jahren 0
@AL [Dieser Benutzer hat nicht genug Repräsentanten für einen Kommentar, daher gab er eine Antwort in der Hoffnung, dass er von einem Moderator in einen Kommentar umgewandelt wird.] (Http://i.stack.imgur.com/dD0os.png) MonkeyZeus vor 7 Jahren 3
Ich habe SnagIt seit Jahren verwendet. Es ist eine sehr nützliche Software. Roy Tinker vor 7 Jahren 0
2
garethb

Ich benutze Screenpresso . Sie können damit einen Screenshot machen. Grundsätzlich machen Sie einen Screenshot, scrollen Sie nach unten und nehmen Sie einen weiteren usw. Dann werden diese von Screenpresso zusammengenäht. Screenpresso ist ebenfalls kostenlos.

Zu Ihrer Information ist die Tastenkombination für das Scrollen des Screenshots WindowsKey + Shift + PrintScreen. Sie müssen dann auf das Fenster klicken, das Sie scrollen möchten. Wenn Sie zum nächsten Teil des Screenshots gelangen, klicken Sie mit der rechten Maustaste, scrollen Sie nach unten, rechtsklicken Sie usw. Wenn Sie fertig sind, klicken Sie mit der linken Maustaste und sie werden zusammengenäht. Stellen Sie sicher, dass sich bei jedem Screenshot einige Überlappungen ergeben, damit der Stichprozess besser funktioniert.

1
Keith Hall

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 aufzunehmen Print Scrn)
  • ein Fragment der Seite (wobei Sie über Bereiche auf dem Bildschirm bewegen können, um das gewünschte Fragment zu finden - diese Regionen entsprechen den zugrunde liegenden HTML-Elementen)
  • ausgewählter Bereich (Sie klicken und ziehen dorthin, wo Sie den Screenshot möchten, unterstützt das Scrollen beim Ziehen)
  • die ganze Seite

Nimbus

Vielen Dank für Ihre Antwort, ich weiß es zu schätzen. Leider sieht es nicht so aus, als könnte Nimbus Screen Capture den gesamten Inhalt eines scrollenden * Elements * innerhalb einer Seite erfassen. Wenn ich mich irre, könnten Sie uns näher erläutern, wie Sie dies mit diesem Tool erreichen können? RockPaperLizard vor 7 Jahren 0
@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, aber während das Fenster in diesem Modus gescrollt werden kann, scheint es die scrollenden Elemente können nicht. Keith Hall vor 7 Jahren 0
Danke für die Bestätigung, dass ich es einfach nicht gesehen habe. Vielleicht werden sie diese Funktionalität einer zukünftigen Version hinzufügen. RockPaperLizard vor 7 Jahren 0
0
NZD

Optionen, um alles auf eine Seite zu bringen:

  • Verwenden Sie <Ctrl>-diese Option, um alles auf eine Seite zu bringen
  • Drehen Sie Ihren Bildschirm in den Portrait-Modus
  • Verwenden Sie im Hochformat einen zweiten Bildschirm, und suchen Sie ihn unter dem ersten
  • Kombinieren Sie alle oben genannten

Eine weitere Option besteht darin, einen Screenshot des oberen Teils von dem aufzunehmen, was Sie aufnehmen möchten. Scrollen Sie nach unten, nehmen Sie den nächsten Bildschirm auf. Wiederholen Sie dies, bis Sie alles erfasst haben.
Optional: Kombinieren Sie die Screenshots mit einem Bildeditor (z. B. Gimp) zu einem großen Bild.

Bis ich zu Punkt 4 kam, dachte ich, Sie würden * nur * vorschlagen, alle Artikel zu kombinieren! Ich stellte mir vor, 20 Bildschirme zu haben und sie übereinander zu stapeln ... LOL. Dann kam ich zu # 4 und erfuhr, dass Sie die Elemente einzeln * oder * kombiniert verwenden wollten. RockPaperLizard vor 7 Jahren 0
Wenn Sie die Seite jedoch verkleinern, können Sie sie ohne Verzerrung nicht wieder verkleinern. NiCk Newman vor 7 Jahren 0
0
user606374

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

Verwandte Probleme