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. ASK Chemicals GmbH, Hilden
  2. Bundeskriminalamt, Wiesbaden

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
Blu-ray-Angebote
  1. 5€ inkl. FSK-18-Versand
  2. (u. a. 3 Blu-rays für 15€, 2 Neuheiten für 15€)
  3. 5€ inkl. FSK-18-Versand

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
       


Touch-Projektoren von Bosch angesehen (CES 2019)

Die Projektoren von Bosch erlauben es, das projizierte Bild als Touch-Oberfläche zu verwenden. Das ergibt einige interessante Anwendungsmöglichkeiten.

Touch-Projektoren von Bosch angesehen (CES 2019) Video aufrufen
Asana-Gründer im Gespräch: Die Konkurrenz wird es schwer haben, zu uns aufzuschließen
Asana-Gründer im Gespräch
"Die Konkurrenz wird es schwer haben, zu uns aufzuschließen"

Asana ist aktuell recht erfolgreich im Bereich Business-Software - zahlreiche große Unternehmen arbeiten mit der Organisationssuite. Für Mitgründer Justin Rosenstein geht es aber nicht nur ums Geld, sondern auch um die Unternehmenskultur - nicht nur bei Asana selbst.
Ein Interview von Tobias Költzsch


    Karma-Spyware: Wie US-Auftragsspione beliebige iPhones hackten
    Karma-Spyware
    Wie US-Auftragsspione beliebige iPhones hackten

    Eine Spionageabteilung im Auftrag der Vereinigten Arabischen Emirate soll die iPhones von Aktivisten, Diplomaten und ausländischen Regierungschefs gehackt haben. Das Tool sei wie Weihnachten gewesen, sagte eine frühere NSA-Mitarbeiterin und Ex-Kollegin von Edward Snowden.
    Ein Bericht von Friedhelm Greis

    1. Update O2-Nutzer berichten über eSIM-Ausfälle beim iPhone
    2. Apple iPhone 11 soll Trio-Kamerasystem erhalten
    3. iPhone mit eSIM im Test Endlich Dual-SIM auf dem iPhone

    Tesla: Kleiner Gewinn, ungewisse Zukunft
    Tesla
    Kleiner Gewinn, ungewisse Zukunft

    Tesla erzielt im vierten Quartal 2018 einen kleinen Gewinn. Doch mit Entlassungen, Schuldenberg, Preisanhebungen beim Laden, Wegfall des Empfehlungsprogramms und zunehmendem Wettbewerb durch andere Hersteller sieht die Zukunft des Elektroauto-Herstellers durchwachsen aus.
    Eine Analyse von Dirk Kunde

    1. Tesla Model 3 Tesla macht alle Varianten des Model 3 günstiger
    2. Kundenprotest Tesla senkt Supercharger-Preise wieder
    3. Stromladetankstellen Tesla erhöht Supercharger-Preise drastisch

      •  /