Zum Inhalt springen →

Webseiten Screenshots erstellen

Wer erinnert sich nicht noch an die gute alte Zeit. Ich erinnere mich noch an meinen ersten Root Server von 1&1 mit sagenhaften 256 MB RAM. Endlich die Freiheit auf meinem Server tun und lassen zu können was ich will. Mein erstes größeres Projekt auf dem Server war ein Thumbshot Generator, der am Donnerstag den 02 März 2006 (Letzter Beitrag auf der Seite) als öffentliche Beta Version gestartet ist.

Zu der Zeit war habe ich die Thumbshots noch mit Java gemacht. Auf dem Server lief ein Tomcat, der die HTML Seiten gerendert hat und mehr oder weniger gute Thumbshots erstellt hat. Später habe ich das ganze dann noch mal umgebaut und in PHP realisiert. Die Thumbshots habe ich dann in einem von 8 Hintergrundprozessen generiert, der auf dem Server einen Firefox Browser mit der Webseite geöffnet hat und mit ImageMagick einen Screenshot von dem Teil der Webseite gemacht hat. Diese Lösung hat sehr gut funktioniert und sehr viele Webmaster haben den Dienst auf den Webseiten verwendet.

Aus dem Grund musste ich dann regelmäßig auf neue und schnellere Server umziehen mit mehr RAM, mehr CPU und mehr Plattenplatz für die Bilder im Cache. Zu Schluss hatte ich 2 Server mit je 3 TB Plattenplatz. Die Generierung und Auslieferung der Thumbshots war 100% auf Performance ausgelegt und die Server waren beide ständig am Limit. Irgendwann wurde mir das aber alles zu viel und ich habe das Projekt ein einen guten Freund und sehr fähigen Linux Superguru (der meine Server mehr als einmal aus der Scheiße gezogen hat) abgegeben der das Projekt nun unter https://thumbsniper.com/ weiterentwickelt hat und auch betriebt.

Heute ist alles einfacher

Was damals noch eine echte technische Herausforderung war ist heute tatsächlich viel einfacher geworden.

Wie ich darauf komme?

Ich habe gerade mal phantomjs/ ausprobiert und mir den Quick Start angesehen. Gleich das zweite Beispiel macht „fast“ genau das meine Server seinerzeit den ganzen lieben langen Tag gemacht haben.

var page = require('webpage').create();
page.open('https://jentsch.io', function(status) {
  console.log("Status: " + status);
  if(status === "success") {
    page.render('dld.png');
  }
  phantom.exit();
});

Unglaublich, wie einfach das geworden ist und mit ein paar Änderungen macht das Skript einen Screenshot von einem Teil der Webseite (1024×768) und es ist kein X-Server, VNC oder ein installierter FireFox Browser nötig. Einziger (unbedeutender) Unterschied ist, dass phantomjs kein Flash kann. Aber da Flash heute kaum noch auf irgendeiner Webseite eingesetzt wird, ist der Unterschied wohl zu vernachlässigen.

var page = require('webpage').create();
page.viewportSize = { width: 1024, height: 768 };
page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };
page.open('https://jentsch.io/', function() {
  page.render('dld.png');
  phantom.exit();
});

Die Geschwindigkeit mit der der Webseite Screenshots erstellt wird ist super …

real    0m1.027s
user    0m0.564s
sys     0m0.064s

… auch wenn die Qualität noch etwas zu wünschen übrig lässt. Aber im Falle der Thumbshots die meist auf eine Breite von 100 – 300 Pixel reduziert wurden währe das auch noch im Rahmen gewesen. Allerdings gibt es keinen Grund, noch mal einen solchen Dienst auf die Beine zu stellen, da es ja den thumbsniper gibt.

Fazit
Früher war doch nicht alles besser!

Veröffentlicht in Allgemein