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

Tooltips in 100% CSS Tooltips sind inzwischen in jeder Web-Applikation zu finden, einfach um dem Benutzer mehr Informationen zu geben oder besser zu führen. Bei ganz windi...
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...
HTML5 Cheat Sheets Ok, es sind nur zwei, aber mehr braucht man auch (erstmal) nicht ;) HTML5 bietet viele neue Möglichkeiten, die nicht nur Videos und Audio betreffen, s...
Adobe Brackets – Code Editor für HTML, CSS &... Nach gefühlten 25 Jahren, dem Plattmachen von Homesite und einigen Versuchen Dreamweaver irgend etwas sinnvolles abzugewinnen glaubt jetzt wohl schein...

Schreibe einen Kommentar