Dynamische Screenshots am Server erstellen mit PhantomJS

Chad Moon hat in seinem Blog Skookum.com eine Anleitung verfasst, mit der sich Screenshots von Websites erstellen und on the fly manipulieren lassen. Dazu kommt PhantomJS zum Einsatz, das einen ähnlichen Funktionsumfang wie Webkit bietet, jedoch ohne die graphische Darstellung von Websites arbeitet. Bedient wird es über JavaScript-APIs.

Der Knackpunkt bei PhantomJS ist die Installation, die Moon in drei Schritten vollzieht. Ein Virtual Private Server (VPS) ist dabei die Grundvoraussetzung, wobei Moon seine Tests auf einem Linode-VPS mit Ubuntu 11.10 durchgeführt hat. Dann hat er X Virtual Framebuffer (Xvfb) und Qt sowie Qt-Webkit installiert, mit denen er virtuelle Fenster erstellen konnte. Für mehr Kompatibilität hat er noch das Flash Plug-in sowie Microsoft-Schriftarten hinzugefügt. Anschließend wurde das PhantomJS-Repository mit Git geklont, und abschließend konnten PhantomJS sowie Qt kompiliert werden.

Nun schreibt Moon ein fünfzeiliges JS-Skript, das alle nötigen Befehle für Phantom bereithält: Es ruft eine bestimmte Website auf, und wenn sie geladen ist, kommt der Callback zum Screenshot-Befehl. Danach wird Phantom beendet. Dieses Skript übergibt er zusammen mit einer Reihe von Parametern an Xvfb, und schon landet das PNG-File im Ordner des JS-Skripts.

Damit das Ganze noch ein wenig mehr Spaß macht, zeigt Moon auch noch, dass man die Elemente der Website frei manipulieren kann. Dafür bindet er in das kleine JS-Skript jQuery-abhängige Funktionen ein, die insgesamt lediglich drei Zeilen zusätzlichen Codes bedeuten.