Wie funktionieren Vorlagen?

Sie speichern HTML und CSS einmal, mit Platzhaltern darin. Jedes Rendering sendet die Variablen für dieses Bild und erhält die Bilddaten zurück, gerendert in der Breite und Höhe, die Sie für die Vorlage festgelegt haben.

Kann ich das Design ändern, ohne meine Anwendung zu ändern?

Ja, genau dafür wird die Vorlage gespeichert. Aktualisieren Sie das gespeicherte HTML, und jedes künftige Rendering verwendet es, ohne Deployment und ohne Änderung am Code, der die Bilder anfordert.

Welche Formate bekomme ich?

PNG, JPEG oder WebP, pro Anfrage wählbar, sodass dieselbe Vorlage an einer Stelle ein verlustfreies Asset und an einer anderen ein kleines liefern kann.

Kann ich einen QR-Code in das Bild einfügen?

Ja. Senden Sie mit dem Rendering ein qr-Objekt, und jeder Code wird erzeugt, auf Scanbarkeit geprüft und als Variable eingefügt, sodass er Teil des Designs wird. Die Erzeugung von QR-Codes kostet keine Credits.

Muss ich die fertigen Bilder speichern?

Nur wenn Sie möchten. Eine signierte Render-URL rendert bei Bedarf direkt unter dieser URL, sodass Sie sie direkt in eine Seite oder eine E-Mail setzen können, ohne die Datei vorher zu erzeugen und zu hosten.

Kann ich einmaliges HTML rendern, ohne eine Vorlage zu speichern?

Ja. Der Screenshot-Endpunkt nimmt HTML direkt statt einer URL an, was zu einem Layout passt, das sich jedes Mal ändert. Gespeicherte Vorlagen passen zu einem Design, das viele Male gerendert wird.

HTML-zu-Bild-API

Einmal gestalten. Tausende Bilder aus Daten erzeugen

Legen Sie ein Layout in HTML und CSS an und rendern Sie es bei jeder Anfrage mit anderen Variablen. Bilder in Ihrem Design aus den Daten, die Sie bereits haben, ohne einen Rendering-Worker zu betreiben oder das Design in einer Bildbibliothek nachzubauen.

Kostenloses Konto erstellen API-Dokumentation lesen

Ein Credit pro Bild
Gespeicherte Vorlagen
Geprüfte QR-Codes inklusive
Im Vereinigten Königreich betriebene Infrastruktur

<h1>{{title}}</h1>
<p>{{author}}</p>

{ "title": "Why we own our hardware",
  "author": "Ironfang" }

IRONFANG

Why we own our hardware

ironfang.uk

Eine Vorlage

Das Design gehört an einen einzigen Ort

Bilder aus Daten zu erzeugen, heißt meist, zwischen zwei schlechten Optionen zu wählen: das Layout in einer Canvas- oder Bildbibliothek nachbauen, wo Schriften und Zeilenumbrüche gegen Sie arbeiten, oder einen eigenen Headless-Browser betreiben und ihn zwischen den Starts am Leben halten.

Ironfang Render speichert das HTML und CSS und rendert es mit den Variablen, die Sie senden. Ändern Sie die gespeicherte Vorlage, und jedes künftige Bild folgt, ohne Deployment und ohne etwas invalidieren zu müssen.

POST /render/v1/image/og-card
Authorization: Bearer if_live_...

{
  "vars": {
    "title": "Why we own our hardware",
    "author": "Ironfang"
  },
  "format": "png"
}

200 image/png

Funktionen

Ein Designsystem, keine Zeichen-API

Alles, was Sie von HTML erwarten, dazu die Speicherung und Ersetzung, die aus einem Design viele Bilder machen.

In HTML und CSS gestalten

Nutzen Sie die Layoutsprache, die Sie schon kennen, mit den Schriften, Verläufen und dem Grid, die Sie auch sonst überall verwenden würden. Keine Canvas-API, keine DSL einer Bildbibliothek.

Gespeicherte Vorlagen

Speichern Sie das Design einmal mit Platzhaltern und rendern Sie es dann pro Anfrage mit anderen Variablen. Das Design liegt an einem Ort statt an jeder Aufrufstelle.

Das Design ändern, nicht den Code

Aktualisieren Sie die gespeicherte Vorlage, und jedes künftige Bild folgt. Kein Deployment und nichts zu leeren, denn das nächste Rendering ist bereits das neue Design.

Geprüfte QR-Codes im Bild

Senden Sie ein qr-Objekt, und der Code wird erzeugt, auf Scanbarkeit geprüft und als Variable ins Layout eingefügt. Die Erzeugung von QR-Codes kostet keine Credits.

Signierte URLs

Erzeugen Sie eine URL, die die Vorlage bei Bedarf rendert, sodass das Bild unter einer URL existiert, ohne dass Ihre Anwendung es erzeugt, speichert oder ausliefert.

PNG, JPEG oder WebP

Wählen Sie das Format pro Anfrage aus einer Vorlage, auf warmem Chromium, das Ironfang im Vereinigten Königreich betreibt, mit kostenlosen Cache-Treffern und Erstattung bei Fehlschlägen.

Anwendungsfälle

Ein Design, viele Bilder

Überall dort, wo das Layout feststeht und sich der Inhalt ändert, also bei den meisten generierten Bildern.

Social Cards und Vorschaubilder

Eine Vorlage, ein Bild pro Seite, mit Titel und Autor als Variablen.

Zertifikate und Abzeichen

Personalisieren Sie pro Empfänger und fügen Sie einen geprüften QR-Code ein, über den sich das Dokument später prüfen lässt.

Produkt- und Angebotsgrafiken

Erzeugen Sie ein Bild in Ihrem Design pro SKU oder Angebot aus den Daten, die Sie bereits haben.

Personalisierte Marketingbilder

Rendern Sie eine Variante pro Empfänger oder Kampagne, ohne dass für jede Variante jemand aus dem Design eingreifen muss.

Automatisierte Berichtsgrafiken

Machen Sie aus einer wöchentlichen Kennzahl eine Grafik in Ihrem Design für den Digest, erzeugt, wenn der Digest erstellt wird.

Tickets und Pässe

Kombinieren Sie Buchungsdaten und einen auf Scanbarkeit geprüften Code zu einem Bild für die Wallet oder die E-Mail.

Sie erzeugen Open-Graph-Bilder?

Social Cards sind der häufigste Einsatz dieser API, und sie haben ihr eigenes Markup und ihren eigenen Ablauf mit signierten URLs. Für genau diese Aufgabe gibt es eine eigene Seite.

API für Open-Graph-Bilder HTML zu Bild kostenlos testen

Preise

Ein Credit pro generiertem Bild

Starten Sie mit 250 kostenlosen Credits pro Monat, ohne Karte. Bezahlte Tarife beginnen bei 9 £ pro Monat für 5.000 Credits, die für Screenshots, PDFs, Bilder und Video gemeinsam gelten. QR-Codes in Ihren Vorlagen kosten nichts, Cache-Treffer sind kostenlos, fehlgeschlagene Aufträge werden erstattet, und beim Erreichen einer Obergrenze pausiert das Rendern, statt Mehrkosten abzurechnen.

Preise von Ironfang Render ansehen Mit anderen Anbietern vergleichen

Fragen

Bevor Sie integrieren

Die Details, die entscheiden, ob es passt, ohne vorher die ganze Referenz zu lesen.

Wie funktionieren Vorlagen?: Sie speichern HTML und CSS einmal, mit Platzhaltern darin. Jedes Rendering sendet die Variablen für dieses Bild und erhält die Bilddaten zurück, gerendert in der Breite und Höhe, die Sie für die Vorlage festgelegt haben.
Kann ich das Design ändern, ohne meine Anwendung zu ändern?: Ja, genau dafür wird die Vorlage gespeichert. Aktualisieren Sie das gespeicherte HTML, und jedes künftige Rendering verwendet es, ohne Deployment und ohne Änderung am Code, der die Bilder anfordert.
Welche Formate bekomme ich?: PNG, JPEG oder WebP, pro Anfrage wählbar, sodass dieselbe Vorlage an einer Stelle ein verlustfreies Asset und an einer anderen ein kleines liefern kann.
Kann ich einen QR-Code in das Bild einfügen?: Ja. Senden Sie mit dem Rendering ein qr-Objekt, und jeder Code wird erzeugt, auf Scanbarkeit geprüft und als Variable eingefügt, sodass er Teil des Designs wird. Die Erzeugung von QR-Codes kostet keine Credits.
Muss ich die fertigen Bilder speichern?: Nur wenn Sie möchten. Eine signierte Render-URL rendert bei Bedarf direkt unter dieser URL, sodass Sie sie direkt in eine Seite oder eine E-Mail setzen können, ohne die Datei vorher zu erzeugen und zu hosten.
Kann ich einmaliges HTML rendern, ohne eine Vorlage zu speichern?: Ja. Der Screenshot-Endpunkt nimmt HTML direkt statt einer URL an, was zu einem Layout passt, das sich jedes Mal ändert. Gespeicherte Vorlagen passen zu einem Design, das viele Male gerendert wird.
Was kostet ein Bild?: Ein Credit pro generiertem Bild. Cache-Treffer kosten nichts, fehlgeschlagene Aufträge werden erstattet, und beim Erreichen einer Obergrenze pausiert das Rendern, statt Mehrkosten abzurechnen.

Weniger betreiben. Mehr ausliefern.

Rendern Sie Ihre erste Vorlage

Erstellen Sie ein Konto, speichern Sie ein Design und senden Sie die Variablen. Das erste Bild ist in Ihren kostenlosen Credits enthalten.

Kostenloses Konto erstellen API-Referenz lesen

250 kostenlose Credits pro Monat, ohne Karte, mit festen Nutzungsobergrenzen und Erstattung bei fehlgeschlagenen Aufträgen.