html2gif / html2jpg
02.07.2009 | Kategorie: Programmierung, Soft- & HardwareWer von uns kennt sie nicht, diese kleinen Thumbnails auf verschiedenen WebSeiten, die wiederum eine Vorschau von anderen Seiten im Internet darstellen. Auf der Suche nach einer geeigneten Software, um diese Bilder selbst herstellen zu können, verzweifelt man recht schnell. Ein bereits fertiges, lauffähiges Programm für Linux, welches sich am besten auch noch automatisiert einsetzen läßt, findet man nicht.
Die ersten Gedanken, die einem durch den Kopf schießen, sagen: Es gibt doch für alles irgendwelche Konvertier-Tools. Ich kann aus einem .doc-Dokument ein PDF machen. Ich kann aus einer Grafik im Format GIF auch problemlos ein JPEG machen. Aber warum gibt es kein einfaches kleines Tool, welches mir aus einer HTML-Datei einfach ein Bild machen kann?
Wenn man über diese Fragestellung dann etwas intensiver nachdenkt, stellt man relativ schnell fest, dass ein solches Programm viel Interpretationsarbeit leisten muss. In Webseiten ist JavaScript eingebunden, wir finden dort häufig Videos, auch hereinfliegende Layer-Werbung ist nicht selten und viele 100 Dinge mehr. Diese Interpretationsarbeit ist natürlich nicht einfach zu bewerkstelligen. Aber auch nicht unlösbar, oder? Also fangen wir an:
Um sich die Interpretationsarbeit der einzelnen HTML-Elemente inkl. Video, Java, JavaScript, PHP, usw. usw. zu ersparen, greifen wir einfach auf einen vorhandenen Browser zurück: z.B. Mozilla. Diesen installieren wir auf unserem Root-Server.
Auf der Shell-Oberfläche allein ist der Browser leider nicht lauffähig. Aber ein X-Server und ein VNC-Server sollten Abhilfe schaffen. Mit Hilfe der Virtual Network Computing Software lassen sich Bildschirminhalte eines entfernten Rechners auf einem lokalen Rechner darstellen. Da die Server im Rechenzentrum meist über keinen Monitor verfügen, den man von zu Hause aus sehen kann, erscheint mir das ein sinnvoller Ansatz zu sein. Wer sich bisher noch nicht mit VNC beschäftigt hat, der sollte mal einen Blick auf die Wikipedia-Seite werfen. Hier findet man einen groben Überblick und auch weiterführende Links.
Gehen wir nun davon aus, dass Mozilla, der X-Server und der VNC-Server auf unserem Rechner installiert sind. Eventuell noch der VNC-Client auf unserem lokalen Computer um die Dinge zu sehen, die nun kommen werden.
Lassen Sie uns also den X-Server starten:
startx &
Den VNC-Server starten wir gleich im Anschluss:
vncserver -geometry 1280×800 -depth 16 :20 &
Nun wo alles läuft können wir auch noch den Mozilla starten und die Seite http://blog.gedankendunst.de aufrufen:
mozilla-firefox –display :20 -height 1280 -width 800 -p default http://blog.gedankendunst.de &
Sofern Sie auch den VNC-Client im Einsatz haben und diesen mit Ihrem Server verbunden haben (In unserem Beispiel mit Display 20), sollten Sie beobachten können, dass sich ein Browserfenster öffnet und die entsprechende Seite dargestellt wird. In unserem Beispiel wird der Browser mit einer Fenstergröße von 1280 Pixel x 800 Pixel geöffnet. Damit sollten auch WebSeiten, die sich in der Breite sehr strecken zumindest horizontal komplett angezeigt werden.
Da wir aber eine Automatisierung der Browser-Screenshots wünschen, kehren wir schnell wieder zu unserem Server zurück. Die Ansicht im VNC-Client diente lediglich der Kontrolle. Sie müssen den Client selbstverständlich nicht einsetzen.
Um von der Shell aus einen Screenshot des im VNC Angezeigten zu erhalten können wir auf xwd zurückgreifen. Dieses Programm erstellt ein beliebiges Abbild eines geöffneten Fensters. Die Syntax für den Aufruf ist:
xwd -display :20 -silent -nobdrs -id <irgendeine ID> -out <Dateiname>
So weit so gut. Nun stellt sich natürlich die Frage, wie die ID des Fensters zu ermitteln ist, dessen Inhalt wir gern in unserer Bilddatei “Dateiname” hätten. Auch dafür gibt es natürlich ein Programm: xwininfo.
Ein Aufruf von
xwininfo -display :20 -root -tree
ergibt nun ein ziemlich unübersichtliches Durcheinander auf unserer Shell. Ein möglicher Output ist folgender:
…
…
0×6684b7 (has no name): () 1288×783+-4+-4 +-4+-4
10 children:
0×6684c1 (has no name): () 1280×20+4+4 +0+0
4 children:
0×6684c8 (has no name): () 20×20+0+0 +0+0
0×6684c7 (has no name): () 20×20+1260+0 +1260+0
0×6684c5 (has no name): () 20×20+1220+0 +1220+0
0×6684c2 (has no name): () 20×20+1240+0 +1240+0
0×6684c0 (has no name): () 1280×755+4+24 +0+20
1 child:
0×100003f “gedankendunst.de – Iceweasel”: (“Gecko” “Firefox-bin”) 1280×755+0+0 +0+20
2 children:
0×1000045 (has no name): () 1280×755+0+0 +0+20
1 child:
0×1000046 (has no name): () 1280×755+0+0 +0+20
1 child:
0×1000047 (has no name): () 1280×755+0+0 +0+20
1 child:
0×1000054 (has no name): () 1280×755+0+0 +0+20
1 child:
0×1000055 (has no name): () 1280×755+0+0 +0+20
3 children:
0×1000080 (has no name): () 16×16+201+35 +201+55
1 child:
0×1000081 (has no name): () 16×16+0+0 +201+55
0×100007e (has no name): () 16×16+201+35 +201+55
1 child:
0×100007f (has no name): () 16×16+0+0 +201+55
0×1000078 (has no name): () 1280×640+0+93 +0+113
1 child:
0×1000079 (has no name): () 1280×640+0+0 +0+113
1 child:
0×100007a (has no name): () 1280×640+0+0 +0+113
1 child:
0×100007b (has no name): () 1280×640+0+0 +0+113
1 child:
0×100007c (has no name): () 1280×640+0+0 +0+113
1 child:
0×100007d (has no name): () 1280×640+0+0 +0+113
1 child:
0×1000101 (has no name): () 1280×640+0+0 +0+113
1 child:
0×1000102 (has no name): () 1280×640+0+0 +0+113
2 children:
0×100035d (has no name): () 789×519+10+10 +10+123
1 child:
0×100035e (has no name): () 789×519+0+0 +10+123
2 children:
0×1000365 (has no name): () 785×440+2+57 +12+180
1 child:
0×1000366 (has no name): () 785×440+0+0 +12+180
1 child:
0×1000367 (has no name): () 785×440+0+0 +12+180
1 child:
0×1000368 (has no name): () 785×440+0+0 +12+180
1 child:
0×1000369 (has no name): () 785×440+0+0 +12+180
1 child:
0×100036a (has no name): () 785×440+0+0 +12+180
0×100035f (has no name): () 780×480+0+0 +10+123
1 child:
0×1000360 (has no name): () 780×480+0+0 +10+123
1 child:
0×1000361 (has no name): () 780×480+0+0 +10+123
1 child:
0×1000362 (has no name): () 780×480+0+0 +10+123
1 child:
0×1000363 (has no name): () 780×480+0+0 +10+123
1 child:
0×1000364 (has no name): () 780×480+0+0 +10+123
0×1000103 (has no name): () 1264×640+0+0 +0+113
1 child:
0×1000104 (has no name): () 1264×640+0+0 +0+113
3 children:
0×1000250 (has no name): () 160×600+800+1340 +800+1453
1 child:
0×1000251 (has no name): () 160×600+0+0 +800+1453
1 child:
0×10002f3 (has no name): () 160×600+0+0 +800+1453
1 child:
0×10002f4 (has no name): () 160×600+0+0 +800+1453
0×10001dc (has no name): () 160×600+800+710 +800+823
1 child:
0×10001dd (has no name): () 160×600+0+0 +800+823
1 child:
0×10002f0 (has no name): () 160×600+0+0 +800+823
1 child:
0×10002f1 (has no name): () 160×600+0+0 +800+823
0×10001d1 (has no name): () 160×600+800+80 +800+193
1 child:
0×10001d2 (has no name): () 160×600+0+0 +800+193
1 child:
0×10002ed (has no name): () 160×600+0+0 +800+193
1 child:
0×10002ee (has no name): () 160×600+0+0 +800+193
0×1000040 (has no name): () 1×1+-1+-1 +-1+19
0×6684bf (has no name): () 24×24+1264+759 +1260+755
0×6684be (has no name): () 24×24+0+759 +-4+755
0×6684bd (has no name): () 24×24+1264+0 +1260+-4
0×6684bc (has no name): () 24×24+0+0 +-4+-4
0×6684bb (has no name): () 1288×4+0+779 +-4+775
0×6684ba (has no name): () 4×783+1284+0 +1280+-4
0×6684b9 (has no name): () 4×783+0+0 +-4+-4
0×6684b8 (has no name): () 1288×4+0+0 +-4+-4
…
…
Versuchen wir das Chaos zu ordnen. Wir suchen nach einem Fenster welches die Größe von 1280 x 800 Pixel hat. Dabei fällt diese Zeile glatt ins Auge:
0×100003f “gedankendunst.de – Iceweasel”: (”Gecko” “Firefox-bin”) 1280×755+0+0 +0+20
Wenn wir von diesem Fenster einen Screenshot mit folgendem Befehl erstellen
xwd -display :20 -silent -nobdrs -id 0×100003f -out meinbild
und diesen anschliessend mit dem Programm convert aus dem ImageMagick-Paket konvertieren
convert meinbild bild.jpg
oder
convert meinbild bild.gif
dann fällt uns auf, dass das Ergebnis schon fast unseren Wünschen entspricht. Was mir augenblicklich an der Ausgabe noch nicht gefällt sind die Browser-Leisten wie beispielsweise die Status-Leiste, das URL-Eingabe-Feld, usw. usw.
Wir müssen also nach einem Fenster dieses Prozesses suchen, welches eine etwas kleinere Größe hat, denn in diesem Fenster müssen die Browser-Leisten fehlen. Nach ein paar Versuchen mit den untergeordneten Fenstern bin ich auf das folgende X-Window gestoßen:
0×1000103 (has no name): () 1264×640+0+0 +0+113
Dieses Fenster erfüllt alle meine Anforderungen an den Screenshot meines Blogs.
Die Größe des Fensters kann bei Ihnen je nach Browser variieren. Um das richtige Fenster zu finden, hilft es einfach nur alle Fenster auszuprobieren. Wenn Sie das für Sie richtige Fenster gefunden haben, können Sie damit beginnen den Prozess der ScreenShot-Herstellung in einem Script zu automatisieren.
Sollte Ihnen das Alles zu umständlich erscheinen, können Sie natürlich auf einen der auf dem Markt vorhandenen Anbieter zurückgreifen. Einer der Anbieter auf dem Markt ist Michael Jentsch der auf der Seite: http://www.m-software.de/thumbshots/ einen solchen bzw. ähnlichen Dienst bereits anbietet.