Dynamische Texterzeugung für Bilder mittels externer API - n8n-Workflow

Markdown-formatierter Text.

Entwickler, die schnelle, anpassbare Platzhalterbilder für Tests und Prototyping benötigen.
Content Creators, die dynamische visuelle Inhalte erstellen möchten, ohne komplexe Designtools verwenden zu müssen.
Anwender, die lernen möchten, wie man den leistungsstarken HTTP Request n8n-Node zum Abrufen externer Ressourcen einsetzt.
Automatisierungsspezialisten, die nach praxisnahen n8n-Vorlagen für eine effiziente externe API-Integration suchen.

Dieser robuste n8n-Workflow bietet eine nahtlose Möglichkeit, benutzerdefinierte Platzhalterbilder zu generieren, indem er direkt mit der kostenlosen DummyJSON API interagiert. Er dient als hervorragendes Beispiel dafür, wie der HTTP Request n8n-Node in Kombination mit der dynamischen Dateneinstellung über den Set n8n-Node genutzt werden kann.

Die Automatisierung löst das häufige Problem, sofort anpassbare Platzhalterinhalte zu benötigen. Durch die Vorkonfiguration von Bildgröße, Hintergrundfarbe, Text und Schriftfamilie innerhalb der n8n-Umgebung eliminiert dieser n8n-Workflow manuelle Schritte. Das macht ihn zu einem wertvollen Werkzeug unter den verfügbaren n8n-Vorlagen für alle, die in der Entwicklung oder bei der schnellen Content-Bereitstellung tätig sind, und demonstriert die Leistungsfähigkeit und Flexibilität der n8n-Integration.

Markdown-formatierter Text.

Dieser einfache und effektive n8n-Workflow läuft in drei Hauptphasen ab:

1. Initialisierung: Der Prozess startet mit dem n8n-Trigger „When clicking ‘Test workflow’” (Bei Klick auf „Workflow testen“). Dieser ist für manuelles Testen konzipiert und ermöglicht es Ihnen, das Ergebnis und die Konfiguration schnell zu überprüfen, ohne dass ein geplanter Lauf erforderlich ist.


2. Konfigurationseinrichtung: Der n8n-Node „Set Image Properties“ (Bildeigenschaften festlegen) initialisiert alle kritischen Parameter, die von der externen API benötigt werden. Variablen wie size (600x400), backgroundColor (cc22e3), textColor (ffffff), der anzuzeigende text („Generated!“), fontSize und fontFamily werden als JSON-Daten festgelegt, die an den nächsten Schritt übergeben werden. Dieser entscheidende n8n-Node standardisiert die Eingabe.


3. API-Ausführung: Der n8n-Node „Fetch Image from API“ (Bild von API abrufen) (ein HTTP Request n8n-Node) führt die Kernfunktion aus. Er konstruiert die API-URL dynamisch mithilfe von Ausdrücken, die auf die im vorherigen Schritt festgelegten Parameter verweisen. Er sendet eine GET-Anfrage an den DummyJSON-Endpunkt. Wichtige Konfigurationseinstellungen (wie Textinhalt und Schriftart) werden sicher als Query-Parameter übergeben, um sicherzustellen, dass das angeforderte Bild korrekt generiert wird und die Bilddaten vom n8n-Workflow zurückgegeben werden.

Markdown-formatierter Text.

1. n8n-Workflow importieren: Kopieren Sie den bereitgestellten JSON-Code und fügen Sie ihn direkt in Ihre n8n-Instanz ein über das Menü „Neu“ > „Aus JSON importieren“.


2. Workflow aktivieren: Stellen Sie sicher, dass der n8n-Workflow aktiviert ist, indem Sie den Schalter oben rechts umlegen.


3. Keine Anmeldedaten erforderlich: Da dieser n8n-Workflow die öffentlich zugängliche DummyJSON API verwendet, sind für den HTTP Request n8n-Node keine externen Anmeldedaten oder API-Schlüssel notwendig.


4. Anpassung: Navigieren Sie zum n8n-Node „Set Image Properties“, um die Abmessungen, Farben oder den Textinhalt an Ihre spezifischen Anforderungen anzupassen. Die hier festgelegten Werte bestimmen das Endergebnis des n8n-Workflows.

Markdown-formatierter Text.

When clicking ‘Test workflow’ (Manueller Trigger n8n-Trigger)
Funktion: Startet die Ausführung des n8n-Workflows manuell, hauptsächlich für Entwicklungs- und Testzwecke.
Wichtige Konfiguration: Keine. Er dient als direkter Einstiegspunkt für den n8n-Workflow.

Set Image Properties (Set n8n-Node)
Funktion: Definiert die Payload-Variablen, welche die gewünschten Eigenschaften des Bildes festlegen (Größe, Farben, Text, Schriftarten).
Wichtige Konfiguration: Definiert explizit mehrere String-Zuweisungen, einschließlich size (600x400), backgroundColor (cc22e3), textColor (ffffff) und des Overlay-text („Generated!“). Diese Variablen stellen sicher, dass der nachfolgende HTTP Request n8n-Node korrekt parametrisiert wird.

Fetch Image from API (HTTP Request n8n-Node)
Funktion: Führt den externen Aufruf an die DummyJSON API durch, um die Bildressource zu generieren und abzurufen.
Wichtige Konfiguration:
URL: Nutzt Ausdrücke wie ={{ $json.size }}, um den Anfragepfad dynamisch auf Basis der vorgeschalteten Variablen aufzubauen.
* Query-Parameter: Übergibt Variablen wie text, fontSize und fontFamily an die API, um die Textdarstellung zu steuern. Diese Integration ist entscheidend für den Erfolg des n8n-Workflows.