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

Skalierbare JavaScript Application Architektur Ich habe gerade bei Nettuts ein interessantes Video gefunden, das ich euch nicht vorenthalten möchte. In rund einer Stunde erklärt Nicholas Zakas eine...
cryptico.js – Verschlüsseln in JavaScript Ajax ist ne lustige Sache, vor allem wenn man die Daten unverschlüsselt durch die Gegend schickt ;) Bei manchen Daten ist das kein Problem, aber späte...
Shortest Path Algorithmus in JavaScript Als ich in der grauen Vorzeit Informatik studiert habe gab es im Grundstudium ein paar Algorithmen, auf denen jeder Professor bis zum Erbrechen rum ge...
Photoshop mit Javascript Zu sagen man kennt Photoshop nicht wäre als wenn ein Eisverkäufer mit der Gabel die Waffeln füllt. Erstaunlicherweise ist es aber so, dass nicht ein B...

Schreibe einen Kommentar