• IT-Karriere:
  • Services:

html2canvas

Browser macht aus Webseiten Bilder

Niklas von Hertzen hat mit html2canvas ein Script geschrieben, mit dem ein Browser Abbilder einer Website erstellen kann. Dazu wird die HTML-Seite in ein Canvas-Element gerendert.

Artikel veröffentlicht am ,
html2canvas: Browser macht aus Webseiten Bilder
(Bild: html2canvas)

Html2canvas 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.

Stellenmarkt
  1. Mediaopt GmbH, Berlin
  2. Berliner Verkehrsbetriebe (BVG), Berlin

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 ist bei Github zu finden. Unter html2canvas.hertzen.com/screenshots.html stellt der Entwickler einen Javascript-Screenhot-Creator zum Testen bereit.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


Anzeige
Top-Angebote
  1. 389€ (Bestpreis)
  2. 399€ (Bestpreis)
  3. (u. a. Dark Souls 3 - Digital Deluxe Edition für 14,49€, Civilization VI - Gathering Storm...

format 29. Jul 2011

Damit meinte ich natürlich Neotiger, die Antwort von developer klingt einleuchtend, danke!

Himmerlarschund... 28. Jul 2011

Yay, wir browsen jetzt direkt in der Cloud! :-)


Folgen Sie uns
       


Canon EOS R5 - Test

Canons spiegellose Vollformatkamera EOS R5 kann Fotos mit 45 Mpx aufnehmen und Videos in 8K - aber Letzteres nur mit Einschränkungen.

Canon EOS R5 - Test Video aufrufen
    •  /