Abo
  • 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. Convidis AG, Sankt Gallen (Österreich)
  2. Schaeffler Technologies AG & Co. KG, Herzogenaurach

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.



Meistgelesen

Anzeige
Spiele-Angebote
  1. 399,99€ mit Vorbesteller-Preisgarantie
  2. 54,99€ mit Vorbesteller-Preisgarantie
  3. 2,99€
  4. (-20%) 47,99€

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
       


Parrot Anafi angesehen

Angucken ja, fliegen nein: Wir waren bei der Vorstellung der neuen Drohne von Parrot dabei.

Parrot Anafi angesehen Video aufrufen
KI in der Medizin: Keine Angst vor Dr. Future
KI in der Medizin
Keine Angst vor Dr. Future

Mit Hilfe künstlicher Intelligenz können schwer erkennbare Krankheiten früher diagnostiziert und behandelt werden, doch bei Patienten löst die Technik oft Unbehagen aus. Und das ist nicht das einzige Problem.
Ein Bericht von Tim Kröplin

  1. Medizintechnik Künstliche Intelligenz erschnüffelt Krankheiten
  2. Dota 2 128.000 CPU-Kerne schlagen fünf menschliche Helden
  3. KI-Bundesverband Deutschland soll mehr für KI-Forschung tun

Segelschiff: Das Vindskip steckt in der Flaute
Segelschiff
Das Vindskip steckt in der Flaute

Hochseeschiffe gelten als große Umweltverschmutzer. Neue saubere Antriebe sind gefragt. Der Norweger Terje Lade hat ein futuristisches Segelschiff entwickelt. Doch solch ein neuartiges Konzept umzusetzen, ist nicht so einfach.
Ein Bericht von Werner Pluta

  1. Energy Observer Toyota unterstützt Weltumrundung von Brennstoffzellenschiff
  2. Hyseas III Schottische Werft baut Hochseefähre mit Brennstoffzelle
  3. Kreuzschifffahrt Wie Brennstoffzellen Schiffe sauberer machen

Bargeldloses Zahlen: Warum Apple Pay sich hier noch nicht auszahlt
Bargeldloses Zahlen
Warum Apple Pay sich hier noch nicht auszahlt

Während Google Pay jüngst hierzulande gestartet ist, lässt Apple Pay auf sich warten. Kein Wunder: Der deutsche Markt ist schwierig - und die Banken sind in einer guten Verhandlungsposition.
Eine Analyse von Andreas Maisch

  1. Bargeldloses Zahlen Apple und Goldman Sachs planen Apple-Kreditkarte

    •  /