Abo
  • IT-Karriere:

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. SICK AG, Waldkirch bei Freiburg im Breisgau
  2. Hochschule Heilbronn, Heilbronn

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.



Anzeige
Top-Angebote
  1. (u. a. Lenovo Legion Y530-15ICH für 699€ + Versand - Bestpreis!)
  2. (u. a. 4K-Filme im Steelbook und Amiibo-Figuren)
  3. ab 99,00€

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
       


Cray X Exoskelett angesehen (Hannover Messe 2019)

Cray X ist ein aktives Exoskelett, das beim Heben unterstützt. Das Video stellt das System vor.

Cray X Exoskelett angesehen (Hannover Messe 2019) Video aufrufen
e.Go Life: Ein Auto, das lächelt
e.Go Life
Ein Auto, das lächelt

Das Auto ist zwar klein, bringt aber sogar gestandene Rennfahrer ins Schwärmen: Das Aachener Unternehmen e.Go Mobile hat seine ersten Elektroautos ausgeliefert. In einer Probefahrt erweist sich der Kleinwagen als sehr dynamisch.
Ein Bericht von Werner Pluta

  1. Elektroauto Skoda Citigo e iV soll 265 km weit fahren
  2. Eon-Studie Netzausbau kostet maximal 400 Euro pro Elektroauto
  3. EZ-Pod Renault-Miniauto soll Stadtverkehr in Kolonne fahren

LTE-V2X vs. WLAN 802.11p: Wer hat Recht im Streit ums Auto-WLAN?
LTE-V2X vs. WLAN 802.11p
Wer hat Recht im Streit ums Auto-WLAN?

Trotz langjähriger Verhandlungen haben die EU-Mitgliedstaaten die Pläne für ein vernetztes Fahren auf EU-Ebene vorläufig gestoppt. Golem.de hat nachgefragt, ob LTE-V2X bei direkter Kommunikation wirklich besser und billiger als WLAN sei.
Eine Analyse von Friedhelm Greis

  1. Vernetztes Fahren Lobbyschlacht um WLAN und 5G in Europa
  2. Gefahrenwarnungen EU setzt bei vernetztem Fahren weiter auf WLAN

Kontist, N26, Holvi: Neue Banking-Apps machen gute Angebote für Freelancer
Kontist, N26, Holvi
Neue Banking-Apps machen gute Angebote für Freelancer

Ein mobiles und dazu noch kostenloses Geschäftskonto für Freiberufler versprechen Startups wie Kontist, N26 oder Holvi. Doch sind die Newcomer eine Alternative zu den Freelancer-Konten der großen Filialbanken? Ja, sind sie - mit einer kleinen Einschränkung.
Von Björn König


      •  /