HTML-Seite als Bild rendern (und speichern o.ä.)

[Sven Rautenberg]

Moin!

Eine kurze Google-Suche ergab nichts wirklich hilfreiches zu diesem Thema:

Ich möchte das optische Erscheinungsbild beliebiger Webseiten mit einer Browser-Engine rendern und als Bild weiterverarbeiten. Das ganze aber nicht manuell, sondern skriptgesteuert automatisiert.

Im Prinzip stelle ich mir vor, ich installiere mir irgendwo z.B. einen aktuellen Mozilla bzw. nur dessen Rendering Engine, rufe irgendein Programm auf mit den Parametern "URL" und "speichern_als", und als Ergebnis erhalte ich die bildliche Darstellung der entsprechenden Website.

Hätte ich erstmal das Bild, könnte ich beispielsweise so Sachen machen wie "Differenz zwischen aktuellem Bild und Entwurf bilden und Abweichung bewerten" - oder auch ganz banal Thumbnails der Seite. ;)

Vor allem aber der erste Punkt schwirrt mir gerade im Kopf herum, weil ich es als praktisch erachte, wenn man, den Idealen der "testgetriebenen Entwicklung" folgend, den optischen Output meßtechnisch erfassen, seine Abweichung vom Entwurf bewerten und als Resultat rot oder grün zurückgeben könnte.

Wer hat denn in diesem Punkt Erfahrungen gesammelt oder auch nur von Ansatzpunkten gehört?

- Sven Rautenberg

[MudGuard]

Hi,

Ich möchte das optische Erscheinungsbild beliebiger Webseiten mit einer Browser-Engine rendern und als Bild weiterverarbeiten. Das ganze aber nicht manuell, sondern skriptgesteuert automatisiert.

Hm. Es gibt diverse Script-Sprachen, mit denen man für Windows-Anwendungen Tastatur- und Maus-Events (evtl. sogar Menü-Events) generieren kann.

Ich hatte mal für sowas AutoIT (http://www.netzwelt.de/software/4014-autoit.html) benutzt, gibt aber auch andere wie z.B. Macro Scheduler (http://www.mjtnet.com/).

Soweit zur skriptgesteuerten Automatisierung.

Zum Abbild der Seite: für den Firefox gibt es eine Erweiterung namens ScreenGrab (http://www.screengrab.org/), mit der das Abbild (nur der sichtbare Bereich oder die gesamte Seite) gespeichert werden kann.

Ob Du aus beiden zusammen Deinen gewünschten Automaten basteln kannst, mußt Du selber ausprobieren.

cu,
Andreas

[Sven Rautenberg]

Moin!

Hm. Es gibt diverse Script-Sprachen, mit denen man für Windows-Anwendungen Tastatur- und Maus-Events (evtl. sogar Menü-Events) generieren kann.

Zum Abbild der Seite: für den Firefox gibt es eine Erweiterung namens ScreenGrab (http://www.screengrab.org/), mit der das Abbild (nur der sichtbare Bereich oder die gesamte Seite) gespeichert werden kann.

Ob Du aus beiden zusammen Deinen gewünschten Automaten basteln kannst, mußt Du selber ausprobieren.

Danke, diese Seite hatte ich auch entdeckt, aber das ist in meinen Augen nicht ganz das, was ich glaube zu brauchen. :) Vielleicht bin ich da aber auch nur zu unflexibel. ;)

Grundproblem dabei ist ja, dass man auf der Kiste, die das Bild generiert, eine komplette grafische Benutzeroberfläche zur Verfügung stellen muß, um so Dinge wie "Mausklicks" etc. überhaupt erst machbar werden zu lassen. Wenn ich die Bildgenerierung aber auf irgendeinem Server laufen lassen will, dann hat der, wenn er z.B. Linux fährt, keine GUI, sondern nur Kommandozeile.

Wie gesagt, vielleicht bin ich auch zu unflexibel. Mein Ziel wäre es, irgendein System zu basteln, dem man eine Sammlung von grafischen Entwürfen als Bitmap-Bild einwirft (nebst diversen Meta-Daten, darunter "verknüpfte URL"), dann auf einen Knopf "Los jetzt!" klickt, und als Ergebnis minimal "Ok" oder "Nicht ok" rauskriegt, je nachdem, ob das Erscheinungsbild der angesurften Webseiten den Entwürfen entspricht, oder nicht (und weil's schwierig sein wird, wirklich 100% exakte Übereinstimmung herzustellen, wird's wahrscheinlich drauf hinauslaufen, eine gewisse Prozentzahl an identischen Pixeln zu überschreiten, so dass unerwartet auftretende Abweichungen dann Aufmerksamkeit erzeugen - das ist dann Feintuning).

- Sven Rautenberg

[Tim]

Hi,
es gibt einen browserunabhängigen Weg.

Anstatt einen Screenshot zu speichern, kann man Dokumente mit verschiedenen Scripten in PDF umwandeln und widerum um Vorschaubilder aus PDF Dokumenten zu bekommen gibt es auch etliche Tools/Scripte.

Das hat sogar noch einen weiteren Vorteil, die Seite liegt komplett
als Text vor und ist damit durchsuchbar. Ich habe das mal so gemacht,
aber mich dann doch entschlossen einen stationären Weg anstatt Server
zu gehen, aber geklappt hatte das wunderbar.

Tim

[Sven Rautenberg]

Moin!

es gibt einen browserunabhängigen Weg.

Ich will keinen browserunabhängigen Weg. :)

Anstatt einen Screenshot zu speichern, kann man Dokumente mit verschiedenen Scripten in PDF umwandeln und widerum um Vorschaubilder aus PDF Dokumenten zu bekommen gibt es auch etliche Tools/Scripte.

Das hört sich nicht so an, als ob am Ende eine 100% exakte Kopie der optischen Darstellung eines der üblichen Browser bei herauskommt.

Das hat sogar noch einen weiteren Vorteil, die Seite liegt komplett
als Text vor und ist damit durchsuchbar. Ich habe das mal so gemacht,
aber mich dann doch entschlossen einen stationären Weg anstatt Server
zu gehen, aber geklappt hatte das wunderbar.

Es geht mir ja eben gerade NICHT darum, Screenshots in einem "netten Format" zugänglich zu speichern, sondern es geht wirklich genau um die Herstellung eines exakten Screenshots, wenn möglich direkt ohne Scrollen von der gesamten Seite, ohne Seitenumbruch oder sonstige Spiränzchen. Ich will bunte Pixel, kein Textformat.

- Sven Rautenberg

[Tim]

Es geht mir ja eben gerade NICHT darum, Screenshots in einem "netten Format" zugänglich zu speichern, sondern es geht wirklich genau um die Herstellung eines exakten Screenshots, wenn möglich direkt ohne Scrollen von der gesamten Seite, ohne Seitenumbruch oder sonstige Spiränzchen. Ich will bunte Pixel, kein Textformat.

Dann habe ich auch noch etwas.
http://www.pixel-technology.com/freeware/url2bmp/english/index.html

Damit bekomme ich sehr gute Ergebnisse.

Tim

[Mathias Brodala]

Hallo Sven.

Eine kurze Google-Suche ergab nichts wirklich hilfreiches zu diesem Thema:

Ich möchte das optische Erscheinungsbild beliebiger Webseiten mit einer Browser-Engine rendern und als Bild weiterverarbeiten. Das ganze aber nicht manuell, sondern skriptgesteuert automatisiert.

Diese Frage wird hier aber öfter mal gestellt. Wie üblich verweise ich auf das KDE-Programm kwebdesktop.

Einen schönen Sonntag noch.

Gruß, Mathias

[Felix Riesterer]

Lieber Sven,

Du willst also für den Mozilla das, was es für den IE schon gibt?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Sven Rautenberg]

Moin!

Du willst also für den Mozilla das, was es für den IE schon gibt?

Ich weiß ja, dass diverse Services mir anbieten, Bilder von Websites zu rendern. Es bringt mir nur nichts, wenn ich diese Services integrieren oder als Quelle anzapfen würde, weil die allesamt erfordern, dass öffentlich zugängliche URLs gerendert werden sollen. Sowas ist aber gerade für die Website-Entwicklung nicht immer gegeben.

Außerdem würde ich nun ausgerechnet nicht den IE (auch wenn's Version 7 ist) als Maßstab für Webseiten-Rendering hernehmen. ;)

Spannend wäre eigentlich nur, welcher Programmcode die Bilder rendert.

- Sven Rautenberg

[Tim Tepaße]

Hallo Sven,

Im Prinzip stelle ich mir vor, ich installiere mir irgendwo z.B. einen aktuellen Mozilla bzw. nur dessen Rendering Engine, rufe irgendein Programm auf mit den Parametern "URL" und "speichern_als", und als Ergebnis erhalte ich die bildliche Darstellung der entsprechenden Website.

Ich hatte vor Jahren mal zwei Varianten gefunden, weiss aber natürlich nicht mehr, wie aktuell die noch sind. Aber vielleicht hilft das als Startpunkt um Links weiter zu verfolgen.

Tim

[Orlando]

Ich möchte das optische Erscheinungsbild beliebiger Webseiten mit einer Browser-Engine rendern und als Bild weiterverarbeiten. Das ganze aber nicht manuell, sondern skriptgesteuert automatisiert.

Ach, das war mit einiger Googelei in einer Viertelstunde erledigt:

tell application "[link:http://www.derailer.org/paparazzi/screenshots@title=Paparazzi!]"  
    activate  
    set minsize to {1024, 768}  
    set filename to (do shell script "ruby -e '[code lang=php]print Time.now.strftime(\"%Y-%m-%d_%H-%M-%S\")
~~~'") & ".png"  
    set iconame to (true)  
    capture "http://example.org/" min size minsize  
    repeat while busy  
        -- Vollständiges Laden der Seite abwarten  
    end repeat  
    save as PNG in "Macintosh HD:Users:roland:desktop:" & filename icon iconame  
    quit application "Paparazzi!"  
end tell[/code]  
  
Apple-, nicht JavaScript und Ruby, nicht PHP. Stil hat man eben. ;-)  
  
Bei jedem Aufruf wird ein PNG-Screenshot der Seite erzeugt und im Format 2007-07-17\_00-25-58.png auf dem Desktop abgelegt. Ein Array aus URIs wäre für dein Anliegen vorteilhaft.  
  
Roland  

-- 
[Mac or PC?](http://www.youtube.com/watch?v=Jkrn6ecxthM)  
  
[Classic Rap](http://sky.fm/classicrap/): [MP3](http://sky.fm/mp3/classicrap.pls) 96k • [AAC+](http://sky.fm/aacplus/classicrap.pls) 24k • [WMA](http://sky.fm/wma/classicrap.asx) 32k

[Gunnar Bittersmann]

Hello out there!

Stil hat man eben. ;-)
[…]
und im Format 2007-07-17_00-25-58.png

Warum nicht im genormten Format 2007-07-17T00:25:58.png?

Das ist Stil!!1elf

See ya up the road,
Gunnar

[Orlando]

im Format 2007-07-17_00-25-58.png

Warum nicht im genormten Format 2007-07-17T00:25:58.png?

Fordere noch Sommerzeit und du wirst eine Eiszeit ernten … >;)

Doppelpunkte im Dateisystem sind übrigens böse, wenn es um Macs geht.

Roland

[Mathias Brodala]

Hallo Orlando.

im Format 2007-07-17_00-25-58.png

Warum nicht im genormten Format 2007-07-17T00:25:58.png?

Fordere noch Sommerzeit und du wirst eine Eiszeit ernten … >;)

Doppelpunkte im Dateisystem sind übrigens böse, wenn es um Macs geht.

Warum?

Einen schönen Dienstag noch.

Gruß, Mathias

[Tim Tepaße]

Hallo Mathias,

Doppelpunkte im Dateisystem sind übrigens böse, wenn es um Macs geht.
Warum?

Der Doppelpunkt ist das normative Pfadtrennzeichen von HFS und HFS+; letzteres ist das Dateisystem von Mac OS X, also als Dateiname nicht erlaubt. Auf der unixoiden Ebene wird aber wieder der Schrägstrich benutzt und das dann von den APIs übersetzt. Kann zu lustigen Ergebnissen führen:

Tim

[Mathias Brodala]

Hallo Tim.

Doppelpunkte im Dateisystem sind übrigens böse, wenn es um Macs geht.
Warum?

[ Erklärung ]

Ah, danke.

Einen schönen Dienstag noch.

Gruß, Mathias

[MudGuard]

Hi,

Doppelpunkte im Dateisystem sind übrigens böse, wenn es um Macs geht.

Nicht nur bzgl. Macs. Auch Windows mag das nicht.
Linux erlaubt's zwar, aber auch hier könnte es mit PATH Probleme geben, da dort der : als Trenner zwischen den einzelnen Verzeichnissen dient.

cu,
Andreas