html2canvas: Browser macht aus Webseiten Bilder
Html2canvas(öffnet im neuen Fenster) erstellt im Browser eine Art "Screenshot" von einer Website. Allerdings handelt es sich dabei nicht um einen tatsächlichen Screenshot, da nicht die Ausgabe des Browsers erfasst wird. Vielmehr rendert das Script die Website in ein Canvas-Element, so dass es bei der Darstellung zu Abweichungen kommen kann.
Dazu liest das Script das DOM und die darauf angewendeten CSS-Regeln aus und malt die Elemente in das HTML5 -Tag Canvas. Das funktioniert, ohne dass Teile durch den Server berechnet werden müssen. Dabei werden allerdings nicht alle Elemente unterstützt, was beispielsweise für Frame- und Object-Elemente und einige CSS-Eigenschaften gilt. Es wird keine CSS3-Eigenschaft unterstützt. Auch Javascript wird nicht interpretiert und vom Browser erzeugte Elemente wie Radio-Buttons und Checkboxen kann html2canvas ebenfalls nicht darstellen.
Derzeit benötigt html2canvas jQuery, das will von Hertzen aber demnächst ändern. Der Code von html2canvas(öffnet im neuen Fenster) ist bei Github zu finden. Unter html2canvas.hertzen.com/screenshots.html(öffnet im neuen Fenster) stellt der Entwickler einen Javascript-Screenhot-Creator zum Testen bereit.