Mein eigener Thumbnail-Generator statt Canva

Ich baue laufend LinkedIn-Karussells und Blog-Titelbilder, und jedes kostenlose Thumbnail-Tool hat mich auf dieselbe Art genervt. Canva will einen Account, bevor du überhaupt etwas speichern kannst. Der kostenlose Tarif setzt ein Wasserzeichen in den Export, sobald du auf Download klickst. Der Editor ist schwer, gebaut für hundert Funktionen, die ich nie anfasse. Jedes Bild, das ich reinziehe, landet erst mal auf einem Server, den ich nicht kontrolliere. Irgendwann hatte ich genug und habe mein eigenes Tool gebaut.

Was mich wirklich gestört hat

Für sich genommen ist keiner dieser Punkte neu, aber zusammen ergeben sie ein Muster. Ein Login für etwas so Kleines zu verlangen fühlt sich falsch an. Ein Wasserzeichen im kostenlosen Tarif heißt: „kostenlos“ ist nicht wirklich kostenlos, sondern eine Testversion mit einem Extraschritt. Du zahlst nicht mit Geld, sondern mit einem sichtbaren Wasserzeichen auf jedem Bild, das du danach postest. Und jedes dieser Tools schickt deine Bilder auf einen Server, egal ob dir das gefällt oder nicht.

Mein Thumbnail-Generator läuft deshalb komplett im Browser. Du ziehst Text und Bilder über eine Fläche, nichts davon verlässt jemals deinen Rechner oder verlangt vorher einen Login. Dass nichts hochgeladen wird, ist bei clientseitigen Tools kein Sonderfall, das Prinzip beschreibe ich ausführlicher beim Bilder-Konverter.

Drag-and-Snap statt Schieberegler und Koordinatenfelder

Die meisten Tools in diesem Bereich geben dir X- und Y-Felder oder Schieberegler für die Position. Du musst erst wissen, welche Zahl du eintippen willst, bevor du überhaupt etwas siehst. Bei meinem greifst du Headline, Unterzeile oder Bild direkt in der Vorschau und ziehst sie an ihren Platz. Näherst du dich einem Drittel, einem Viertel oder der Mitte der Fläche, rastet das Element ein. Genauso rastet es an einer bereits platzierten Ebene ein, und eine Headline an einer Bildecke auszurichten ist damit ein Zug, keine Koordinatensuche.

Ein Klick löst dabei noch keine Bewegung aus. Erst nach etwa drei Pixeln Weg zählt der Zeiger als Ziehen. Klick und Zug starten technisch mit demselben Mausereignis, deshalb braucht es diese kleine Schwelle, um beides auseinanderzuhalten. Sonst würde jeder Klick in den Text zum Editieren die Position verschieben. Die Ecken eines Bildes skalieren es. Die kleinen gelben Griffe an den Seiten des markierten Textes verbreitern oder verschmälern den Zeilenumbruch. Die Schriftgröße bleibt dabei unangetastet, nur die Zeilenumbrüche verschieben sich.

Der Export zeichnet jeden Pixel, in voller Auflösung

Drei Formate stehen zur Wahl: 1920×1080 für 16:9, 1080×1350 für 4:5, 1080×1920 für 9:16. Was du in der Vorschau siehst, ist eine verkleinerte Version von genau dem, was am Ende exportiert wird. Der Export zeichnet nämlich auf einem unsichtbaren Canvas in der echten Zielauflösung und gibt ein PNG zurück, Pixel für Pixel. Skalierst du eine kleine Vorschau später hoch, verlierst du Schärfe. Genau das passiert hier nicht, weil nie eine Vorschau, sondern immer die Quelle exportiert wird.

Der PDF-Export funktioniert im Kern genauso: ein exportierter Canvas pro Slide, eingebettet als Seite. Der Unterschied ist pdf-lib, die Bibliothek, die das PDF zusammensetzt. Sie lädt erst, wenn du wirklich auf „PDF herunterladen“ klickst. Willst du nur PNGs, kommt dieser Code nie in deinen Browser.

Der Font-Bug, der jeden Export lautlos ruiniert hätte

Dieser Teil lohnt sich für jeden, der etwas Ähnliches baut. Die Headline-Schrift Anton ist aus Lizenzgründen im Einsatz, die ich im Sammelpost zu den zwölf Tools schon beschrieben habe. Sie liegt selbst gehostet vor, eingebunden über eine manuelle @font-face-Regel statt über next/font. Der Grund: next/font vergibt einen gehashten Familiennamen. Ein fillText-Aufruf auf dem Canvas braucht aber einen echten Namen, den er referenzieren kann, keinen Hash.

Damit allein war es nicht getan. Ein Browser wartet beim Zeichnen auf dem Canvas nicht darauf, dass eine Web-Schrift fertig geladen ist. Anders ist das beim gewöhnlichen DOM-Text auf dem Bildschirm. War Anton noch nicht bereit, fiel ctx.font still auf die nächste Schrift im Stapel zurück, ohne Warnung oder Fehlermeldung. In diesem Tool war dieser Fallback Impact.

Die Vorschau auf dem Bildschirm sah dabei trotzdem richtig aus, weil DOM-Text auf die Schrift wartet, bevor er gerendert wird. Nur die exportierte Datei war falsch. Das hätte man erst gemerkt, wenn man sie öffnet, nicht vorher am Bildschirm.

Der Fix sind zwei Aufrufe vor jedem Export: document.fonts.load("400 64px Anton"), danach await document.fonts.ready. Der Fix ist billig zu schreiben und leicht zu vergessen. Genau das macht ihn zu der Art Bug, die nur in der heruntergeladenen Datei auftaucht, nie in dem, was man am Bildschirm sieht.

Wo ich es tatsächlich nutze

Meistens bündle ich damit eine Woche LinkedIn-Thumbnails in einer Sitzung. Das Format bleibt über ein ganzes Karussell konsistent, damit die Slides als Set wirken. Oder ich exportiere aus einer Vorlage direkt ein mehrseitiges PDF-Deck, statt jede Folie einzeln herunterzuladen. Genau dafür gibt es mehrere Slides und Slide-Duplizieren direkt im Tool.

Die Texte für so ein Karussell entstehen bei mir oft parallel zu den Bildern. Dafür gibt es das LinkedIn-Text-Formatierungstool. Das Tool ist für einen einzigen Job gebaut: eine Headline, eine Unterzeile, vielleicht ein Foto, alles einrasten lassen und exportieren, ohne dich irgendwo einzuloggen.

Für echte Gestaltungsarbeit mit Ebenen und Filtern ist Canva weiterhin die bessere Wahl. Es reiht sich neben dem JLPT-Trainer und dem Rest des Werkzeugkastens in ein Muster ein. Ich schneide ein Tool exakt auf die Aufgabe vor mir zu, statt mich an die Aufgabe eines fremden Tools anzupassen.

Wenn du wie ich mit Claude Code eigene Tools baust, lohnt sich der Font-Bug von oben zum Merken. Sobald du selbst Text mit einer eigenen Schrift auf einen Canvas zeichnest, lade die Schrift vorher explizit mit document.fonts.load() und warte auf document.fonts.ready. Sonst rendert der Canvas fröhlich mit welcher Schrift auch immer gerade verfügbar war.