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. SWM Services GmbH, München
  2. Controlware GmbH, München, Ingolstadt

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
Hardware-Angebote
  1. 915€ + Versand
  2. mit Gutschein: HARDWARE50 (nur für Neukunden, Warenwert 104 - 1.000 Euro)
  3. ab 119,98€ (Release 04.10.)

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
       


Fazit zu Spider-Man (PS4)

Spider-Man ist trotz ein paar kleiner Schwächen ein gelungenes Spiel, dem wir mit viel Freude ins Netz gehen.

Fazit zu Spider-Man (PS4) Video aufrufen
Red Dead Redemption 2 angespielt: Mit dem Trigger im Wilden Westen eintauchen
Red Dead Redemption 2 angespielt
Mit dem Trigger im Wilden Westen eintauchen

Überfälle und Schießereien, Pferde und Revolver - vor allem aber sehr viel Interaktion: Das Anspielen von Red Dead Redemption 2 hat uns erstaunlich tief in die Westernwelt versetzt. Aber auch bei Grafik und Sound konnte das nächste Programm von Rockstar Games schon Punkte sammeln.
Von Peter Steinlechner

  1. Red Dead Redemption 2 Von Bärten, Pferden und viel zu warmer Kleidung
  2. Rockstar Games Red Dead Online startet im November als Beta
  3. Rockstar Games Neuer Trailer zeigt Gameplay von Red Dead Redemption 2

Gesetzesentwurf: So will die Regierung den Abmahnmissbrauch eindämmen
Gesetzesentwurf
So will die Regierung den Abmahnmissbrauch eindämmen

Obwohl nach Inkrafttreten der DSGVO eine Abmahnwelle ausgeblieben ist, will Justizministerin Barley nun gesetzlich gegen missbräuchliche Abmahnungen vorgehen. Damit soll auch der "fliegende Gerichtsstand" im Wettbewerbsrecht abgeschafft werden.
Von Friedhelm Greis


    Lenovo Thinkpad T480s im Test: Das trotzdem beste Business-Notebook
    Lenovo Thinkpad T480s im Test
    Das trotzdem beste Business-Notebook

    Mit dem Thinkpad T480s verkauft Lenovo ein exzellentes 14-Zoll-Business-Notebook. Anschlüsse und Eingabegeräte überzeugen uns - leider ist aber die CPU konservativ eingestellt und ein gutes Display kostet extra.
    Ein Test von Marc Sauter und Sebastian Grüner

    1. Thinkpad E480/E485 im Test AMD gegen Intel in Lenovos 14-Zoll-Notebook
    2. Lenovo Das Thinkpad P1 ist das X1 Carbon als Workstation
    3. Thinkpad Ultra Docking Station im Test Das USB-Typ-C-Dock mit robuster Mechanik

      •  /