html2canvas – Screenshots mit JavaScript

Wenn man mal überlegt, womit sich man sich als Blogger so seine Zeit vertreibt, wird man auf eins sehr schnell kommen: Screenshots. Die kleinen Biester sind ein aufwendiges, aber notwendiges übel. Das heisst sie waren es: es gibt wirklich nichts besseres als Skitch auf einem Mac! Das kleine Programm ist mit ein Grund dafür, wieso ich inzwischen so gerne auf meinem MacBook blogge. Viel lustiger wäre es, wenn es aber einen richtigen Automatismus gäbe.

Beispiele html2canvas

html2canvas greift ein interessantes Konzept auf. Das JavaScript schafft es, mit reinen Bordmitteln des Browsers eine beliebige Webseite in einen HTML5-Canvas zu übertragen. Das ist die gute Nachricht: es geht, die schlecht ist: es dauert. Bei komplexen Webseiten kann die reine Erstellung des Canvas schonmal 10 Sekunden oder länger dauern. Trotzdem ist das Script klasse!

Warum? Es gibt bereits ähnliches Services, die entweder in der Cloud angesiedelt sind, oder (für den lokalen Webserver) auf PHP basieren. Letzteres funktioniert manchmal, ersteres meistens. Es gibt immer die eine Webseite, die den Screenshot-Service zur Verzweiflung bringt. Natürlich gibt es auch richtig gute funktionierende Services, aber dann bewegt man sich auch schnell in einem Bereich, in der ein solcher Service kostenpflichtig ist.

Der Trick an html2canvas ist der, das man natürlich auf alle Funktionalitäten des Browsers zurückgreifen kann – also auch auf das komplette Rendern – nebst evtl. notwendiger Addons. Man sollte sich zum Beispiel mal einen Screenshot von YouTube anschauen, was zwar grandios langsam ist, aber anstelle der Videos mit keinen schwarzen Boxen aufwartet, sondern mit (Überraschung) Videos :)

Das Tool besitzt noch nicht alle notwendigen Features, und es ist langsam, und grandios Beta – aber der Weg ist richtig, und es funktioniert. Darüber hinaus glänzt es mal mit einer komplett anderen Canvas-Anwendung, und nicht mit hübschen Graphen oder ähnlichem Quatsch.

Ähnliche Beiträge

PouchDB – CouchDB mit Javascript Ich habe ja schon desöfteren verkündet, das man nicht alles mit MySQL todschlagen muss. Zum einen gibt es sinnvolle Key-Value-Stores, zum anderen Date...
Cartoview – Mashups Made Simple Zu jeder besseren Web2.0-Anwendung gehört heutzutage eine Map, sei es nur um Daten zu visualisieren, aber auch zur Nutzung von Location Based Services...
Dynamische Favicons mit Funktion Die Idee ist ebenso genial wie einfach: Wenn sich ein Benutzer erst einmal an einem System angemeldet hat, besteht eine Session. Besteht eine Session ...
Enquire.js – Media Query Callbacks in JavaScript Media-Queries sind eine richtig schicke Angelegenheit, ohne die ein Responsive Design nicht möglich wäre. Ganz einfach ausgedrückt läuft die Sache so:...

Schreibe einen Kommentar