Image to Canvas

Live

Zerlege eine Spieloberfläche in bewegliche Elemente und bearbeitbaren Text, per Arbeitsfläche, API und MCP.

$0.49 per image$0.49 pro Import. Bearbeitung und Export kostenlos. Fehlgeschlagene Imports werden erstattet. Dateien bleiben 7 Tage.

Bild in eine Arbeitsfläche umwandeln

Zerlege eine Spieloberfläche in bewegliche Elemente und bearbeitbaren Text. Teste das Beispiel kostenlos oder importiere dein Bild.

Bild-URLBild hochladen

$0.49 pro Import. Bearbeitung und Export kostenlos. Fehlgeschlagene Imports werden erstattet. Dateien bleiben 7 Tage.

Deine Arbeitsfläche

Wähle eine Ebene oder doppelklicke Text. Ziehe zum Verschieben, nutze die Ecken zum Skalieren und mache Änderungen rückgängig.

JSON-Arbeitsfläche öffnen

So funktioniert’s

01Bild hochladenPNG, JPEG oder WebP bis 10 MB und 25 Megapixel.
02Bearbeitbare Arbeitsfläche erstellenErhalte getrennte Bild- und Textebenen. Wähle, verschiebe, skaliere und ordne Elemente.
03Speichern und wiederverwendenExportiere PNG, portables JSON oder einzelne Komponenten. KI-Agenten nutzen dieselbe Arbeitsfläche per REST und MCP.

Image to Canvas aus deinem Code aufrufen

Zerlege eine Spieloberfläche in bewegliche Elemente und bearbeitbaren Text, per Arbeitsfläche, API und MCP.

POSThttps://api.opennan.com/v1/images/canvas

GET/v1/canvas/{task_id}
POST/v1/canvas/{task_id}/edit
GET/v1/canvas/{task_id}/export

API-Schlüssel holen
Erstelle einen Schlüssel in der Konsole. Er nutzt dasselbe Guthaben wie der Playground.
Schlüssel erstellen

Erste Anfrage senden

Dieselbe Anfrage, die der Playground sendet. Setze OPENNAN_KEY auf deinen Schlüssel.

curl https://api.opennan.com/v1/images/canvas \
  -H "Authorization: Bearer $OPENNAN_KEY" \
  -H "Content-Type: application/json" \
  -d '{"image_url":"https://cdn.opennan.com/examples/image-to-canvas/2026-11-13/game-ui-74844a91c33f/source.webp","max_cost_usd":0.49}'

# Then poll until "status" is "succeeded" or "failed":
curl https://api.opennan.com/v1/canvas/<task id> -H "Authorization: Bearer $OPENNAN_KEY"

Task abfragen
Der Aufruf antwortet sofort mit einer Task-ID. Frag den Task ab, bis er fertig ist:
GEThttps://api.opennan.com/v1/canvas/{id}
queued
Wartet auf einen Worker
running
Wird erstellt
succeeded
Fertig: outputs[].url enthält die Dateien
failed
Fehlgeschlagen: wird nicht berechnet

Fehler und wie du sie behebst

401Schlüssel fehlt oder ist falsch
Sende den Header Authorization: Bearer mit einem Schlüssel aus der Konsole.
402Guthaben zu niedrig
Lade unter Abrechnung Guthaben auf und sende denselben Aufruf erneut.
400Ein Wert wird nicht akzeptiert
Lies error.message: Dort steht das Feld. Nimm einen Wert aus der Parametertabelle.
429Zu viele Anfragen
Warte ein paar Sekunden und versuche es erneut, nach jedem 429 etwas länger.

MCPhttps://api.opennan.com/v1/canvas/mcp

Aus einem KI-Agenten nutzen

Füge deinem Agenten den Opennan-MCP-Server hinzu und rufe dieses Tool auf.

Tool: layer_design
Beispielargumente: { "action": "import", "image_url": "https://cdn.opennan.com/examples/image-to-canvas/2026-11-13/game-ui-74844a91c33f/source.webp", "max_cost_usd": 0.49 }

Image to Canvas: Fragen

Kann ein KI-Agent die Arbeitsfläche bearbeiten?

Ja. layer_design am Canvas-MCP-Endpunkt ermöglicht Import, Lesen, Bearbeiten und Export. Nur der Import kostet. Lies vor Änderungen die aktuelle Revision.