Eenvoudig screenshots van websites maken

Soms lijkt iets niet te kunnen (of in ieder geval niet gratis) en blijkt het achteraf heel erg eenvoudig te zijn. Zo ben ik vorige week bezig geweest aan een script dat in de browser tamelijk complexe tabellen produceert. De exacte inhoud en betekenis daarvan doet er niet zo toe, de tabellen zijn opgemaakt in HTML. Daarnaast maakte mijn script op basis van dezelfde data een grafiek die gebruikt maakt van JQuery. Ziet er ook heel mooi uit. In de browser.
Maar wilde die tabellen en grafieken ook in rapportages kunnen opnemen, bijvoorbeeld in een Word-document of een PDF. Nu zijn er wel scripts om PDF’s te maken vanuit PHP (dat is waar ik de server-kant van de scripts in schrijf), maar dan moest ik ze nogmaals opbouwen in een andere syntax (namelijk van de component die PDF’s kon genereren). En daar kwam bij dat dat dan niet voor de JQuery grafiek zou lukken.

Nu kon ik natuurlijk de pagina’s printen, maar dat vond ik teveel werk (het gaat om in totaal zo’n 75 verschillende rapportages nu al en dan dus steeds een tabel en grafiek). Het moest automatisch kunnen. Mijn voordeel is daarbij wel dat het gaat om een prototype dat alleen op mijn eigen Windows-laptop of computer thuis hoeft te kunnen functioneren.

Wat rondzoeken op internet leverde een aantal applicaties op waarmee je automatisch schermafbeeldingen kon maken van webpagina’s. Die waren niet gratis en soms heel duur als je ze op een server wilde gebruiken.

Ik kwam er echter eentje tegen die wél gratis is en geschikt voor mijn doel: SiteShoter.

Het programma hoefde niet geïnstalleerd te worden, gewoon unzippen en klaar. Als je dan dubbelklikt op het programma dan start er een applicatie op waar je de verschillende opties kunt instellen, een URL van een webpagina kunt invoeren en kunt aangeven waar het resultaat moet komen.

siteshotLeuk, ook was dat nog steeds niet helemaal wat ik wilde hebben. Ik wilde het programma namelijk koppelen aan mijn PHP scripts. En dat bleek ook te kunnen omdat SiteShoter ook overeen commandline interface beschikt. Je kunt het dus niet alleen vanaf een “DOS-box” aanroepen, maar ook vanuit PHP (mits je PHP op een Windows machine draait).

Zoals ik zei, het hoefde voor mij geen productie-kwaliteit oplossing te zijn. Dit zul je dus niet voor een publieke website met veel bezoekers willen inzetten, sowieso al niet omdat die vaak op Linux draaien en daar werkt SiteShoter dan niet op.

Ik heb XAMPP in gebruik als ontwikkel omgeving. Is een kwestie van downloaden en setup draaien en je hebt een volledige Apache webserver met PHP op je lokale computer draaien.

Ik heb SiteShoter gedownload en ge-upzipt naar de submap  .\xampp\htdocs\siteshot\siteshoter

siteshot

In .\xampp\htdocs\siteshot staat één bestand “index.php” dat alle werk doet. Als je op de link klikt zie je de code die er achter zit. Niet heel veel: het toont eerst een formulier waar je een URL in kunt voeren. Dan klik je op de submit knop, wacht even (het ophalen van de pagina en genereren van de afbeelding duurt een paar seconden) en dan wordt er een afbeelding van de betreffende URL/pagina getoond.

Ik toon nu een link naar de afbeelding boven de afbeelding om het downloaden eenvoudig te maken. De meeste settings voor de conversie worden door het config-bestand ingesteld (is te maken vanuit de GUI van de applicatie, maar de bijgeleverde tekstbestanden zijn ook heel helder), de rest door de commando-regel die in PHP via “exec()” de executable aanroept.

siteshotIk kan het script ook zonder die pagina starten en bijvoorbeeld via http://localhost/siteshot/?u=http://ictoblog.nl/ een URL doorgeven.

En dat is ook de basis voor de manier waarop ik het script integreer in het andere script waar ik mee bezig was. Ik kan nu vanuit PHP de URL  van de pagina die ik heb laten genereren doorgeven aan dit script. Waar het nu nog de afbeelding laat zien zal het straks dan alleen de URL met de locatie van de gegenereerde afbeelding retour geven. Dat is dan voor het eerste script dan weer voldoende om de afbeelding op te halen en (afhankelijk van wat ik wil) in een Word-document te stoppen.

Siteshot is zelf al een staat om meerdere URLs op te halen op basis van een lijstje met URLs (zie daarvoor de documentatie in het ZIP-bestand) maar ik kan het ook pagina per pagina (steeds dus met een tabel of een grafiek) ophalen. Daarbij maakt het dan niet uit hoe de pagina tot stand gekomen is, ook de JQuery grafiek wordt zo netjes gecaptured zoals je ook kunt zien in de screenshot hierboven waarbij ik het op een Google Documents grafiek uitgetest heb.

[update 23:11] Helaas blijkt Siteshoter toch meer problemen met mijn script te hebben dan gehoopt. De JQuery grafiek wordt helemaal niet zichtbaar en de tabel minder mooi dan gewone websites. 🙁

0 0 stemmen
Bericht waardering
1 Reactie
Inline Feedback
Bekijk alle reacties
Patrick de Vos
Patrick de Vos
14 jaren geleden

Xampp…….ik gebruik USBWebserver. De naam zegt het al, je kunt dan vanaf je USB stick gebruik maken van je lokale webserver met PHP en MySql. Handig, USB stick in andere pc/laptop en je kunt je site in worden laten zien aan anderen.