Meme-Generator

Meme-Generatoren bedeuten meist, das eigene Foto auf den Server von jemand anderem hochzuladen und zu hoffen, dass der Export kein Wasserzeichen trägt. Dieser läuft vollständig im Browser: Sie ziehen ein Bild hinein, fügen obere und untere Bildunterschriften hinzu, wählen eine Schriftart und Farben und laden ein sauberes PNG herunter. Nichts wird übertragen.

Verwendung

1. Ein Bild hinzufügen. Auf die Ablagezone klicken, um einen Dateiauswahldialog zu öffnen, oder eine Datei darauf ziehen. Das Tool akzeptiert jeden Bildtyp, den der Browser dekodieren kann — typischerweise JPG, PNG, GIF und WebP.
2. Die Bildunterschriften schreiben. In die Felder für oberen und unteren Text tippen. Jedes ist auf 100 Zeichen begrenzt und wird in Großbuchstaben gerendert.
3. Den Text gestalten. Impact, Arial oder Comic Sans MS wählen, mit dem Regler eine Größe von 12 bis 120 einstellen und eine Textfarbe sowie eine Konturfarbe (Stroke) wählen.
4. Herunterladen. Auf die Download-Schaltfläche klicken, um das Canvas als meme.png zu speichern. Ist kein Bild geladen, tut die Schaltfläche nichts.

Was mit Ihrem Bild geschieht

Das Canvas ist ein festes Rechteck von 600×400. Wenn ein Bild geladen wird, vergleicht das Tool das Seitenverhältnis des Bildes mit dem 3:2-Verhältnis des Canvas, skaliert es so, dass es das Canvas in der längeren Dimension abdeckt, und zentriert es.

• Ist das Bild breiter als 3:2, wird es auf die volle Breite skaliert, und die überschüssige Höhe wird vom Canvas beschnitten.
• Ist das Bild höher als 3:2, wird es auf die volle Höhe skaliert, und die überschüssige Breite wird beschnitten.

Weil das Canvas zuerst geleert und nie gefüllt wird, bleibt jeder Bereich, den das Bild nicht abdeckt, transparent. Daher stammen die Balken.

Praxisbeispiel: Ein Foto mit 2000×1500

Ein Foto mit 2000×1500 hat ein Seitenverhältnis von 1,333, während das Canvas 600 / 400 = 1,5 beträgt. Das Bild ist relativ zu seiner Höhe schmaler als das Canvas, also skaliert das Tool es auf die Canvas-Höhe:

• Zeichenhöhe = 400 px
• Zeichenbreite = 400 × 1,333 = 533 px
• Linker Versatz = (600 − 533) / 2 = 33,5 px

Das Ergebnis ist ein 533×400 großes Bild, zentriert mit etwa 33 Pixel breiten transparenten Balken auf jeder Seite. Ein Foto mit 1920×1080 (Verhältnis 1,778) geht den anderen Weg: Es skaliert auf die volle Breite von 600 Pixeln und füllt ein 600×338-Band, wodurch oben und unten etwa 31 Pixel Transparenz bleiben. Ein Zuschnitt auf 3:2 vor dem Hochladen entfernt die Balken vollständig.

Typografie-Details

Die Schrift wird als bold <size>px "<font>", "Impact", sans-serif angewendet, sodass der Browser bei fehlender gewählter Schrift auf Impact und dann auf die System-Sans-Serif zurückfällt. Der Text wird zweimal gezeichnet: einmal mit strokeText in der Konturfarbe und einmal mit fillText in der Füllfarbe. Die Konturbreite skaliert mit der Schriftgröße (etwa ein Achtel der Größe, mit einem Minimum von 2 Pixeln), was den Strich proportional zu den Buchstaben hält.

Die obere Bildunterschrift beginnt bei fontSize + 20 von oben, und die untere ist height − 20 von der Grundlinie nach oben verankert. Mehrzeilige Unterschriften wachsen zur Bildmitte hin, wobei die Zeilenhöhe das 1,2-Fache der Schriftgröße beträgt. Bei den Standardwerten 48 px mit weißer Füllung und schwarzer Kontur erscheint der klassische Look sofort.

Schriftart und Farben wählen

Die drei Schriftarten setzen sehr unterschiedliche Töne. Impact ist das klassische Image-Macro-Gesicht: komprimiert, schwer und auch mit dicker Kontur lesbar. Arial ist sauberer und weniger ironisch, was zu Arbeits- oder Lehr-Memes passt. Comic Sans MS wirkt bewusst locker und harmoniert gut mit heiteren Bildunterschriften. Wenn der Browser die gewählte Schrift nicht installiert hat, fällt er auf Impact zurück, weshalb Impact die sicherste Wahl für ein konsistentes Ergebnis über verschiedene Rechner hinweg ist.

Farbkontrast ist die andere Hälfte der Lesbarkeit. Die standardmäßige weiße Füllung mit schwarzer Kontur funktioniert auf fast jedem Foto, weil die Kontur die Buchstaben sowohl von hellen als auch von dunklen Hintergründen trennt. Umgekehrt — eine schwarze Füllung mit weißer Kontur — liest sich ebenfalls gut. Eine farbige Füllung ohne Kontur neigt dazu, in unruhigen Bildern zu verschwinden, besonders bei kleinen Größen. Wenn die Bildunterschrift über einem detaillierten Bereich liegt, helfen eine größere Schrift oder eine stark kontrastierende Konturfarbe mehr als jede andere Anpassung.

Wissenswerte Grenzen

• Feste Ausgabegröße. Downloads sind immer 600×400, unabhängig von der Quellauflösung.
• Keine freie Positionierung. Bildunterschriften nur oben oder unten, zentriert und immer in Großbuchstaben.
• Nur das erste Frame. Animierte GIFs werden zu einem Standbild.
• Umbruch auf Wortebene. Ein einzelnes sehr langes Wort kann den Rahmen überlaufen.
• Maximal zwei Zeilen pro Unterschriftenbereich, da es nur zwei Textfelder gibt.
• Nur clientseitig. Das Bild wird mit einem FileReader gelesen und auf ein Canvas gezeichnet; es wird nie hochgeladen.
• Keine Schatten- oder Abstandsregler. Nur Füll- und Konturfarbe sind einstellbar; Buchstabenabstand und Schlagschatten gibt es nicht.

Verwandte Tools

• Bildkompressor — Bilder im Browser komprimieren und skalieren.
• Bild zu Base64 — Bilder in Base64-Daten-URIs zur Einbettung konvertieren.
• Text zu Handschrift — Text in realistische handschriftliche PNG-Bilder umwandeln.
• Farbwähler — Farben zwischen HEX, RGB und HSL auswählen und konvertieren.