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

Individuelle Checkboxen ohne JavaScript Schuster bleib bei deinen Leisten ist nicht immer eine gute Idee! Vor allem dann, wenn man seine Stiefel anstatt gegen die Version aus Gummi auszutaus...
jwerty – JavaScript Keyboard Events vom Fein... Keyboard Events in Javascript sind in Backends das vielleicht am meisten unterschätze Feature! Wenn man mal ehrlich ist: man benutzt die Tastatur kaum...
Heatmap mit dem HTML5 Canvas Element Heatmaps sind sinnvolle kleine Helferlein bei der Analyse einer Webpage. Ich habe schon darüber berichtet wie man mit der Open Source Clickheat eine f...
Plugins für jQuery Ich sehe und übernehme einiges an Seiten und muss leider sagen, dass scheinbar bei Javascript-Programmierung vor Beginn der Arbeiten das Hirn einmal r...

Schreibe einen Kommentar

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