Kostenloses Text-zu-Bild-Tool

Warum du Text in ein Bild verwandeln musst

Text und Bilder reisen sehr unterschiedlich durchs Internet. Text wird von jeder Plattform neu formatiert, die ihn berührt, Schriften verschieben sich, Zeilenumbrüche ändern sich, Einrückung kollabiert, Sonderzeichen werden zerstört. Bilder sind atomar: jeder Pixel überlebt. Also wann immer die Formatierung wichtig ist, ist das Verwandeln des Texts in ein Bild der einfachste Weg, sicherzustellen, dass das, was du geschrieben hast, das ist, was die Leute sehen. Häufige Szenarien: Code-Snippets, die auf Twitter/X geteilt werden (das Einrückung und Zeilenumbrüche aus Textbeiträgen entfernt, aber gerne Bilder rendert); Zitatgrafiken für Instagram (Instagram-Bildunterschriften erlauben keinerlei Schriftformatierung, jeder ästhetische typografische Beitrag ist ein Bild von Text); Forum-Signaturen und Banner auf phpBB oder Discourse, wo hochgeladene Bilder überleben, aber exotische Typografie in BBCode nicht; Screenshot-ohne-die-UI, wenn du ein Stück Text teilen möchtest, als hättest du einen Screenshot gemacht, aber ohne das umgebende Browser-Chrome; benutzerdefinierte Button-Bilder für altmodische Websites oder HTML-E-Mails, wo Webfont-Lizenzierung ein Problem ist; WhatsApp Status und Snapchat-Overlays, wo gestylter Bildtext besser liest als die plattformeigenen Beschriftungswerkzeuge; E-Mail-Signaturen für Clients, die reiche Formatierung entfernen (ältere Outlook-Versionen sind berüchtigt, eine bildbasierte Signatur ist die Umgehung). Der gemeinsame Faden: Wenn du dem Ziel nicht vertrauen kannst, Text so zu rendern, wie du es möchtest, rendere ihn zuerst selbst als Bild.

Wie die Canvas-API Text rendert

Das HTML-<canvas>-Element stellt einen 2D-Rendering-Kontext bereit, der Text über drei Kernmethoden behandelt. ctx.font akzeptiert dieselbe Kurzschreibweise wie CSS ("bold 32px Helvetica, Arial, sans-serif"), Schriftgewicht, Schriftgröße und Schriftfamilie in einem String. ctx.fillStyle setzt die Farbe (jeder CSS-Farbwert: hex, rgb, hsl, benannt). ctx.fillText(text, x, y) rendert den Text an der angegebenen Position mit der aktuellen Schrift und Füllung. Zwei unterstützende Methoden sind wichtig: ctx.measureText(text) gibt ein TextMetrics-Objekt zurück, das die gerenderte width und (in modernen Browsern) actualBoundingBoxAscent und actualBoundingBoxDescent für die vertikale Bounding-Box-Berechnung enthält; ctx.textAlign kontrolliert die horizontale Ausrichtung (left, right, center, start, end) relativ zur x-Koordinate; ctx.textBaseline kontrolliert die vertikale Ausrichtung (top, middle, alphabetic, hanging, ideographic) relativ zur y-Koordinate. Die Standard-alphabetic-Baseline setzt die y-Koordinate auf die Baseline der Kleinbuchstaben, was die typografische Konvention ist, aber für Layout kontraintuitiv, die meisten Rendering-Codes wechseln zu top für vorhersehbare y-Positionierung. Mehrzeiliger Text wird nicht automatisch umgebrochen: fillText rendert eine Zeile an einer einzigen Position. Wort-für-Wort manuelles Umbrechen mit measureText in einer Schleife ist das Standardmuster.

Warum nur sieben Schriften

Die sieben Schriftauswahlen hier, Arial, Helvetica, Georgia, Times New Roman, Courier New, Verdana, Impact, sind die kanonischen „Web-Safe-Schriften", die standardmäßig auf praktisch jeder Windows-, macOS- und den meisten Linux-Desktop-Installationen ausgeliefert werden. Die Liste entstand aus Microsofts Core-Fonts-for-the-Web-Projekt (1996-2002), das Impact, Verdana, Georgia, Trebuchet MS und andere als kostenlose TrueType-Downloads verteilte, um plattformübergreifende Konsistenz zu säen. Nur Systemschriften zu wählen bedeutet, dass das gerenderte Bild gleich aussieht, unabhängig davon, welches Gerät es generiert; eine Google-Font zu verwenden würde erfordern, die Schriftdatei zuerst über die document.fonts.ready-Promise zu laden, bevor Canvas-Text gerendert wird, ein gangbarer, aber schwererer Pfad. Für Werkzeuge, deren spezifische Aufgabe „ausgefallene Typografie" ist, ist das Laden benutzerdefinierter Schriften unerlässlich. Für einen schnellen Utility-Text-zu-Bild-Generator decken die sieben Web-Safe-Auswahlen praktisch jedes gängige typografische Register ab: Arial / Helvetica (neutrale serifenlose, das Arbeitspferd), Verdana (serifenlose mit großer x-Höhe, für Bildschirmlesen entworfen), Georgia / Times New Roman (Serife für Eleganz / Formalität), Courier New (monospace für codeartigen Inhalt), Impact (das meme-kanonische kondensierte fette Display-Schriftbild). Für absichtlich eigenwillige oder markierte Typografie verwende ein dediziertes Werkzeug, das benutzerdefinierte Schriften lädt.

Hoch-DPI / Retina-Schärfe

Eine naive Canvas-Implementierung produziert unscharfe Ausgabe auf hochdichten Displays. Moderne Telefone, Tablets und „Retina"-Laptops haben ein window.devicePixelRatio von 2 (manchmal 3), was bedeutet, dass jedes CSS-Pixel auf 2 (oder 3) physische Pixel abgebildet wird. Ein Canvas, das in seinen CSS-Dimensionen gerendert wird, hat nur 1 Pixel Detail pro CSS-Pixel, das für die Anzeige 2x gestreckt wird und sichtbare Weichheit produziert. Die Behebung besteht darin, die Backing-Store-Dimensionen des Canvas (canvas.width und canvas.height) auf die CSS-Dimensionen multipliziert mit devicePixelRatio zu setzen, dann mit CSS die angezeigte Größe auf die ursprünglichen CSS-Dimensionen festzulegen, dann ctx.scale(devicePixelRatio, devicePixelRatio) aufzurufen, damit alle nachfolgenden Zeichenoperationen das ursprüngliche CSS-Koordinatensystem verwenden. Dieses Werkzeug wendet die Hoch-DPI-Korrektur automatisch an, das heruntergeladene PNG ist scharf in Retina-Auflösung und druckt sauber bei typischen Dokumentgrößen.

Code-Snippets als Bilder, verwende stattdessen Carbon

Zum Teilen von Code-Snippets als Bilder, dem häufigsten Anwendungsfall für „Text-zu-Bild", gibt es dedizierte Werkzeuge, die Syntax-Highlighting, Spracherkennung, Theme-Voreinstellungen und Fensterchrom-Dekoration weitaus besser handhaben als ein generischer Text-zu-Bild-Generator könnte. Carbon (Dawn Labs, gestartet 2017, carbon.now.sh) ist die kanonische Option: Code einfügen, eine Sprache und ein Theme wählen, die gerenderte Ausgabe für Twitter/Slack/Blog-Beiträge ablegen. Ray.so (Raycast, gestartet 2022) ist der moderne Carbon-Konkurrent mit einer leicht saubereren Standardästhetik und besserer Dark-Theme-Behandlung. Codeimg.io, Chalk.ist, Snappify und CodeSnap konkurrieren in derselben Nische mit verschiedenen Differenzierern (Vorlagen, Multi-Fenster-Layouts, gebrandete Hintergründe). Für einfache Prosa, Schlagzeilen, Zitate und Signaturen ist dieser Generator die richtige Form; für Code verwende Carbon.

PNG vs. JPEG vs. WebP für Textbilder

Für Bilder, die hauptsächlich Text enthalten (was dieses Werkzeug produziert), ist PNG fast immer das richtige Format. Text hat harte Kanten und große flache Farbflächen, genau das, was JPEG am schlechtesten handhabt. JPEGs diskrete Kosinustransformation schmiert scharfe Kanten mit Klingelartefakten („Mosquito-Rauschen"), die besonders schlecht um Buchstabenformen aussehen. PNGs verlustfreie DEFLATE-Kompression handhabt flache Farbflächen effizient und hält Text bei jeder Zoomstufe scharf. PNG unterstützt auch Transparenz, nützlich beim späteren Überlagern von Text auf existierenden Bildern. JPEG macht nur Sinn für Textbilder mit fotografischen Hintergründen (ein Zitat auf einem Landschaftsfoto, zum Beispiel), wo der fotografische Inhalt die Dateigröße dominiert. WebP (verlustfreier Modus) gibt PNG-äquivalente Qualität bei typischerweise 26% kleinerer Dateigröße und wird 2026 in 97% der Browser unterstützt. Dieses Werkzeug exportiert PNG für maximale Kompatibilität, lege es in jede Anwendung ab, ohne sich um Formatunterstützung sorgen zu müssen.

Barrierefreiheits-Hinweis: Text-als-Bild verliert Durchsuchbarkeit

Wann immer du Text in ein Bild verwandelst, verlierst du drei Dinge: Screenreader-Zugänglichkeit (sehbehinderte Nutzer, die assistierende Technologie verwenden, können Text innerhalb eines Bildes ohne OCR nicht lesen), Durchsuchbarkeit (Suchmaschinen und Textsuchwerkzeuge indizieren die umgebende Bildunterschrift oder den Alt-Text, aber nicht den Bildinhalt selbst) und Kopieren-Einfügen (Nutzer können keinen Text aus einem PNG auswählen und kopieren). Für soziale Posts, bei denen der Bild-als-Text-Kompromiss beabsichtigt ist, ist das in Ordnung. Für alles, was auffindbar, indexierbar oder zugänglich sein muss, bevorzuge echten HTML-Text, der mit CSS gestylt ist, und reserviere den Bild-von-Text-Ansatz für Kontexte, in denen die Plattform dich zwingt. WCAG-Richtlinien empfehlen, sinnvollen Alt-Text für jeden Text-als-Bild bereitzustellen, mindestens den sichtbaren Text in das Alt-Attribut zu transkribieren, damit Screenreader ihn ansagen können.

Datenschutz: Warum reiner Browser hier wichtig ist

Der Text, den du in ein Bild verwandelst, ist genau die Art von Inhalt, bei dem Datenschutz wichtig ist: Entwürfe sozialer Posts, interne Memos, Screenshots-von-Text aus vertraulichen Dokumenten, Zitate aus unveröffentlichten Arbeiten. Serverseitige Text-zu-Bild-Generatoren laden deinen Text auf einen entfernten Server hoch, wo er in Logs landet. Dieses Werkzeug läuft vollständig in deinem Browser über die Canvas-API, überprüfe es im Netzwerk-Tab von DevTools, während du generierst, oder nimm die Seite offline (Flugmodus), nachdem sie geladen ist, und das Werkzeug funktioniert immer noch. Sicher für vertrauliche Entwürfe, NDA-Kundenkopien, interne Kommunikation oder jeden Text, den du nicht auf der Festplatte eines Fremden kopiert haben möchtest.

Häufige Fragen