Wie man einen Screenshot der gerenderten HTML-Seite macht

9

Unser Webanalysepaket enthält detaillierte Informationen zu den Aktivitäten des Benutzers auf einer Seite und wir zeigen (Klick / Scroll / Interaktion) Visualisierungen in einem Overlay über der Webseite. Derzeit ist dies ein IFrame, der ein Live-Rendering der Seite enthält.

Da Seiten sich im Laufe der Zeit ändern, entsprechen ältere Daten nicht mehr dem aktuellen Layout der Seite. Wir würden gerne eine Spinne laufen lassen, um gelegentlich Schnappschüsse von den Seiten zu machen, so dass wir Aufzeichnungen über Interaktionen mit verschiedenen Versionen der Seite führen können.

Wir haben eine funktionierende Implementierung (Linux), aber der Snapshot-Prozess ist ein hässlicher Python / JavaScript / HTML-Hack, der ein Firefox-Fenster öffnet, scannt und scrollt und zusammenführt und in einer Datei speichert. Dazu müssen wir den X-Stack auf unseren normalerweise kopflosen Servern installieren und benötigen eine Minute pro Seite.

Wir würden eine Headless-Implementierung bevorzugen, deren Leistung in einem normalen Webbrowser näher an der Renderzeit liegt, aber nichts gefunden haben.

Es gibt etwas Bewegung, etwas mit der Mozilla-Quelle als Ausgangspunkt zu bauen, aber das erscheint mir wie ein Overkill, genauso wie ein Wartungs-Albtraum, wenn wir versuchen, ihn auf dem neuesten Stand zu halten.

Vorschläge?

    
ryandenki 10.08.2009, 04:24
quelle

3 Antworten

1

Ein Artikel über Digital Inspiration zeigt auf < a href="http://cutycapt.sourceforge.net/"> CutyCapt , das plattformübergreifend ist und die Webkit-Rendering-Engine sowie IECapt , das die aktuelle IE-Rendering-Engine verwendet und Windows, natch benötigt. Nichts von der Spitze meines Kopfes, die Gecko, Firefox Rendering-Engine verwendet.

Ich bezweifle jedoch, dass Sie in der Lage sein werden, von X wegzukommen. Da CutyCapt Qt benötigt, benötigt es entweder X oder eine Windows-Installation. Und in ähnlicher Weise benötigt IECapt Windows (oder Wine, wenn Sie versuchen möchten, es unter Linux auszuführen, und dann brauchen Sie wieder X). Ich bezweifle, dass Sie in der Lage sein werden, eine Rendering-Engine zu finden, die Qt, Gtk, GDI oder Cocoa nicht benötigt und daher eine vollständige Installation von Display-Bibliotheken erfordert.

    
Conspicuous Compiler 10.08.2009 04:34
quelle
0

Warum speichern Sie nicht den HTML-Code, der an den Client gesendet wird? Sie können das dann verwenden, um in einem Webbrowser als eine Seite wieder anzuzeigen, um zu zeigen, wie es aussah.

Wenn Sie Ihre webanalytics-Daten über Use-Aktionen verwenden, können Sie diese verwenden, um die Kombinationsfelder, Felder usw. auf die Werte des Clients zu setzen, sogar die CSS-Schaltflächen usw. zu ändern, um sie als verschoben zu markieren / p>

Ein Vorteil ist, dass Sie den X-Stack nicht benötigen und kein Crawlen oder Speichern von Bildern durchführen müssen.

BEARBEITEN (Re Andrew Moore):

Hier speichern Sie die aktuellen CSS / Bilder unter einer Versionsnummer. Platzieren Sie eine leicht analysierbare Versionsnummer in einem Kommentar im HTML. Wenn Sie Ihre CSS / Bilder ändern und die vorhandenen Namen verwenden, erhöhen Sie die Versionsnummer in der gesendeten HTML-Ausgabe.

Das System, das den HTML-Code speichert, weiß, dass er eine neue Kopie aufnehmen und unter einer neuen Nummer speichern muss. Beim erneuten Anzeigen wird einfach die Versionsnummer verwendet, um festzulegen, welches CSS / Bildset verwendet werden soll.


Wir haben derzeit ein System, das ein sehr ähnliches System verwendet, so dass wir Benutzeraktionen verfolgen und einen besseren Support bieten können, wenn sie unseren Helpdesk anrufen, da sie die Benutzersitzung aufrufen und verfolgen können, was sie getan haben, selbst wenn sie live sind / p>

Sie können es sogar so programmieren, dass sensible Felder bei der Speicherung automatisch zensiert werden.

    
Dan McGrath 10.08.2009 04:38
quelle
0

Je nach den spezifischen Anforderungen Ihrer Bedürfnisse könnten Sie vielleicht mit einem der vielen kostenlosen Webseiten-Thumbnails loslegen? snapcasa , zum Beispiel können Sie Tausende pro Monat generieren / keine Gebühr keine Werbung .. (nicht verwendet, nur gegoogelt "kostenlose Thumbnail-Service") zu finde das.

nur ein Thot

    
Scott Evernden 10.08.2009 05:11
quelle

Tags und Links