HTML in Bild umwandeln — HTML & CSS als PNG
Stellt eingefügtes HTML und CSS dar und speichert es als PNG in gewählter Breite und Skalierung
Verarbeitung im Browser · kein Hochladen
Fügen Sie ein Fragment (<div>…) oder ein ganzes Dokument (<html>…) ein. Bei einem ganzen Dokument werden nur der Inhalt von <body> und die <style>-Blöcke verwendet.
Zusätzliche Stile. <style>-Blöcke im HTML gelten ebenfalls.
Der Inhalt wird in dieser Breite (px) gesetzt und in voller Höhe aufgenommen. 100–4000.
2× ist scharf wie ein Retina-Bildschirm, 3× eignet sich für den Druck. Die Pixelzahl wächst mit dem Quadrat der Skalierung.
Aus Sicherheits- und Datenschutzgründen werden Bilder, Schriften und CSS unter anderen Adressen als data: oder blob: weder in der Vorschau noch bei der Aufnahme angefordert, und Skripte laufen nie. Text verwendet die auf Ihrem Gerät installierten Schriften.
Vorschau
Geben Sie HTML ein, um die Vorschau zu sehen.
Was macht das Tool?
Es speichert ein Stück HTML und CSS – etwa eine Karte, einen Hinweis, eine Tabelle, eine Schaltfläche oder ein E-Mail-Banner – als PNG-Bild. So zeigen Sie dargestellte Ergebnisse in einer Dokumentation oder einem Blogbeitrag, bauen eine Hinweiskarte für soziale Medien per Code oder teilen einen Teil eines Designs als Bild. Anders als bei einem zugeschnittenen Screenshot erhalten Sie eine exakte Breite und Skalierung.
So geht’s
- Fügen Sie Code unter HTML ein: ein ganzes Dokument (
<html>…) oder nur ein Fragment. Zum Ausprobieren klicken Sie auf Beispiel einfügen. - Ergänzen Sie bei Bedarf Stile unter CSS (optional).
<style>-Blöcke im HTML gelten ebenfalls. - Stellen Sie Aufnahmebreite (px), Skalierung (1×, 2×, 3×) und Hintergrund (Weiß oder Transparent) ein.
- Prüfen Sie die Vorschau, klicken Sie auf PNG erstellen und dann auf PNG speichern.
So funktioniert es
- Sichere Vorschau: Der Code wird in einem abgeschotteten iframe (Sandbox) dargestellt. Die Sandbox verhindert die Ausführung von Skripten, und eine Content Security Policy blockiert alle Netzwerkanfragen außer data:- und blob:-Adressen.
- Externe Adressen entfernt: Der eingefügte Code wird zuerst von den HTML- und CSS-Parsern des Browsers gelesen (dabei wird nichts geladen). Jede Adresse, die nicht data: oder blob: ist, in src, srcset, poster, SVG-href, style-Attributen,
<style>, url(), image-set(), @import und @font-face wird entfernt und für Sie aufgelistet. Unmittelbar vor der Aufnahme wird die Vorschau erneut geprüft, und während der Aufnahme lassen sich nur data:- und blob:-Adressen lesen, sodass nie eine Anfrage an eine externe Adresse geht. Links (<a href>) beeinflussen das Bild nicht und werden daher nicht aufgelistet; sie werden so geändert, dass ein Klick ins Leere führt. - Aufnahmegröße: Der Inhalt wird in der gewählten Breite gesetzt und in seiner tatsächlichen Höhe aufgenommen. Das PNG misst Breite × Skalierung mal Höhe × Skalierung.
- Größenlimit: Über dem, was der Browser verarbeiten kann (16.777.216 Pixel auf iPhone und iPad, 16.384 px pro Seite), wird die Skalierung automatisch gesenkt, und die Seite weist darauf hin.
- Ganze Dokumente: Verwendet werden nur der Inhalt von
<body>und alle<style>-Blöcke; andere Tags im<head>entfallen. - Für die Aufnahme sorgt html-to-image (MIT-Lizenz).
Beispiele
| Eingabe | Einstellungen | Ergebnis |
|---|---|---|
| Die Beispiel-Hinweiskarte | Breite 800, 2× | PNG, 1600 px breit |
Eine <table> mit CSS |
Breite 600, 3×, transparent | PNG, 1800 px breit, transparenter Hintergrund |
| Code mit externem Bild | Breite 800, 1× | Das externe Bild bleibt leer; blockierte Adressen werden aufgelistet |
Für Vektorgrafiken nutzen Sie SVG in PNG; für Markdown probieren Sie die Markdown-Vorschau.
Häufige Fragen
Kann ich eine Website über ihre URL aufnehmen?
Nein. Dafür bräuchte es einen Server, der die Seite für Sie öffnet, und das macht dieses Tool nicht. Fügen Sie HTML und CSS ein, das Sie selbst geschrieben oder aus den Entwicklertools Ihres Browsers kopiert haben.
Bilder fehlen.
Aus Sicherheits- und Datenschutzgründen werden Bilder, Schriften und CSS unter jeder Adresse außer data: oder blob: (http, https, // und relative Pfade) nie geladen. Adressen, die mit HTML-Zeichenreferenzen oder CSS-Escapes verschleiert sind, werden so geprüft, wie der Browser sie dekodiert, und ebenfalls blockiert. Das Tool listet die blockierten Adressen auf; betten Sie Bilder als data:-Adressen (Base64) ein, dann erscheinen sie. Das Tool Bild in Base64 erzeugt solche Adressen.
Die Schrift sieht anders aus als im Entwurf.
Webfont-Dateien werden nicht geladen, Text verwendet also die auf Ihrem Gerät installierten Schriften. Fehlt die angegebene Schrift, wird die Systemschrift verwendet (zum Beispiel Segoe UI unter Windows, San Francisco auf Apple-Geräten).
Erscheinen Inhalte, die per JavaScript erzeugt werden?
Nein. Skripte im eingefügten Code werden nicht ausgeführt; gezeichnet wird nur statisches HTML und CSS.
Wird mein Code an einen Server gesendet?
Nein. Vorschau und Bild entstehen beide in Ihrem Browser.
