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. Qualitätssicherungsverantwo- rtliche bei der Softwareentwicklung (m/w/d)
    Bundeskriminalamt, Meckenheim
  2. IT-Diensteverantwortliche/IT- -Diensteverantwortlicher (m/w/d)
    Bezirksamt Friedrichshain-Kreuzberg von Berlin, Berlin-Friedrichshain-Kreuzberg
Detailsuche

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.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


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! :-)



Aktuell auf der Startseite von Golem.de
Klimaforscher
Das Konzept der Klimaneutralität ist eine gefährliche Falle

Mit der Entnahme von CO2 in den nächsten Jahrzehnten netto auf null Emissionen zu kommen, klingt nach einer guten Idee. Ist es aber nicht, sagen Klimaforscher.
Von James Dyke, Robert Watson und Wolfgang Knorr

Klimaforscher: Das Konzept der Klimaneutralität ist eine gefährliche Falle
Artikel
  1. 30.000 Menschen sahen zu: Bitcoin-Diebe lockten mit gefälschtem Apple-Livestream
    30.000 Menschen sahen zu
    Bitcoin-Diebe lockten mit gefälschtem Apple-Livestream

    Cyberkriminelle haben auf Youtube eine Keynote des Herstellers Apple vorgetäuscht, um Zuschauer um Bitcoin zu betrügen.

  2. Eco-SIM: Vodafone führt die recycelte SIM-Karte ein
    Eco-SIM
    Vodafone führt die recycelte SIM-Karte ein

    Laut Vodafone ist das Netz schon grün. Auch die SIM-Karte soll umweltfreundlich werden. Doch ganz so einfach ist es nicht.

  3. M1 Pro/Max: Dieses Apple Silicon ist gigantisch
    M1 Pro/Max
    Dieses Apple Silicon ist gigantisch

    Egal ob AMD-, Intel- oder Nvidia-Hardware: Mit dem M1 Pro und dem M1 Max schickt sich Apple an, die versammelte Konkurrenz zu düpieren.
    Eine Analyse von Marc Sauter

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • Cyber Week: Bis zu 16% auf SSDs & RAM von Adata & bis zu 30% auf Alternate • 3 Spiele für 49€: PC, PS5 uvm. • Switch OLED 369,99€ • 6 Blu-rays für 40€ • MSI 27" Curved WQHD 165Hz HDR 479€ • Chromebooks zu Bestpreisen • Alternate (u. a. Team Group PCIe-4.0-SSD 1TB 152,90€) [Werbung]
    •  /