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. Robert Bosch GmbH, Eisenach
  2. Bosch Sicherheitssysteme GmbH, Hamburg

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
Spiele-Angebote
  1. 3,99€
  2. 4,95€
  3. 53,99€
  4. 22,49€

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
       


AMD Ryzen 7 2700X - Test

Wie gut ist der Ryzen-Refresh? In Anwendungen schlägt er sich sehr gut und ist in Spielen oft überraschend flott. Besonders schön: die Abwärtskompatibilität.

AMD Ryzen 7 2700X - Test Video aufrufen
Razer Nommo Chroma im Test: Blinkt viel, klingt weniger
Razer Nommo Chroma im Test
Blinkt viel, klingt weniger

Wenn die Razer Nommo Chroma eines sind, dann auffällig. Dafür sorgen die ungewöhnliche Form und die LED-Ringe, die sich beliebig konfigurieren lassen. Die Lautsprecher sind aber eher ein Hingucker als ein Hinhörer.
Ein Test von Oliver Nickel

  1. Razer Kiyo und Seiren X im Test Nicht professionell, aber schnell im Einsatz
  2. Stereolautsprecher Razer Nommo "Sind das Haartrockner?"
  3. Nextbit Cloud-Speicher für Robin-Smartphone wird abgeschaltet

Datenverkauf bei Kommunen: Öffentliche Daten nicht verhökern, sondern sinnvoll nutzen
Datenverkauf bei Kommunen
Öffentliche Daten nicht verhökern, sondern sinnvoll nutzen

Der Städte- und Gemeindebund hat vorgeschlagen, Kommunen sollten ihre Daten verkaufen. Wie man es auch dreht und wendet: Es bleibt eine schlechte Idee.
Ein IMHO von Michael Peters und Walter Palmetshofer

  1. Gerichtsurteil Kein Recht auf anonyme IFG-Anfrage in Rheinland-Pfalz
  2. CDLA Linux Foundation veröffentlicht Open-Data-Lizenzen
  3. Deutscher Wetterdienst Wetterdaten sind jetzt Open Data

Xperia XZ2 Compact im Test: Sonys kompaktes Top-Smartphone bleibt konkurrenzlos
Xperia XZ2 Compact im Test
Sonys kompaktes Top-Smartphone bleibt konkurrenzlos

Sony konzentriert sich beim Xperia XZ2 Compact erneut auf die alte Stärke der Serie und steckt ein technisch hervorragendes Smartphone in ein kompaktes Gehäuse. Heraus kommt ein kleines Gerät, das kaum Wünsche offenlässt und in dieser Größenordnung im Grunde ohne Konkurrenz ist.
Ein Test von Tobias Költzsch

  1. Xperia XZ2 Premium Sony stellt Smartphone mit lichtempfindlicher Dualkamera vor
  2. Sony Grundrauschen an Gerüchten über die Playstation 5 nimmt zu
  3. Playstation Sony-Chef Kaz Hirai verabschiedet sich mit starken Zahlen

    •  /