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

CSS Refresh ohne Reload, dafür mit JavaScript Seien wir doch mal ehrlich, was ist die am meisten genutzte Taste auf eurer Tastatur? Richtig! F5 - Reload! ;) Das nervige Reloaden einer Seite kann d...
Hakim El Hattabs HTML5 Experimente HTML5 entwickelt sich zu einem Konstrukt, das für Webworker primär aus einem besteht: Einem Konstrukt der über mehr Browserweichen verfügt, als es für...
JavaScript Events für Responsive Webdesign Responsive Webdesign ist nicht nur begrenzt auf geschicktes HTML & CSS sondern hat auch Auswirkungen auf JavaScript. Zum einen möchte man, dass be...
Mit Repo.js GitHub-Repositories in die eigene Seit... GitHub ist eine echt feine Sache, ich habe trotz der recht interessanten Preisgestaltung erst vor kurzem auf einen Premium-Account gewechselt. Es mach...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.