Let's Build: Hintergrund entfernen mit Transloadit
Entfernen Sie den Hintergrund eines lokalen Produktfotos oder Porträts und speichern Sie das Ergebnis als PNG. Dieses Beispiel lädt ein Bild zu Transloadit hoch, wartet auf die Verarbeitung und lädt das Ergebnis in eine neue lokale Datei herunter.
Was wir entwickeln
Der Befehl akzeptiert eine nicht leere PNG- oder JPEG-Datei mit bis zu 20 MiB und erfordert einen
explizit angegebenen Ausgabepfad, der auf .png endet. Diese Grenzen gelten für das
Ausführungsprogramm dieses Tutorials. Die Originaldatei bleibt unverändert; Sie prüfen das
gespeicherte Bild, bevor Sie es in einem Katalog oder Design verwenden.
Die Hintergrundentfernung ist kostenpflichtig. Sie benötigen einen bestehenden Auth Key und das zugehörige Auth Secret für einen Transloadit-Workspace sowie ein Bild, das Sie hochladen dürfen. Separate Zugangsdaten für einen KI-Anbieter sind nicht nötig. Die Konfiguration nutzt für die Anbieterauswahl die automatische Voreinstellung des Robots; das Programm erstellt oder ändert keine Zugangsdaten. Prüfen Sie die Preise, bevor Sie weitere Dateien verarbeiten.
Pipeline im Überblick
Der Robot 🤖 /image/bgremove nimmt das hochgeladene Bild entgegen und erzeugt das PNG. Das Ausführungsprogramm speichert das Ergebnis anschließend lokal. Sie müssen also keine temporäre Ergebnis-URL aufbewahren.
Local PNG or JPEG → upload → /image/bgremove → download → result.png
Assembly-Ausschnitt
Das herunterladbare Programm exportiert seine Konfiguration als example.
Ausgehend von der unten beschriebenen Projektstruktur liest dieser TypeScript-Code dieselben
Assembly Instructions, die auch der Befehl
verwendet, ohne eine Assembly zu übermitteln:
import { example } from './background-remover/run.ts'
const steps = example.steps()
Der Step remove_background verwendet :original, setzt
format: 'png' und kennzeichnet die Ausgabe mit result: true.
Wenn Sie die Pipeline anpassen, übernehmen Sie die Änderungen in die heruntergeladene Konfiguration,
damit der Befehl und Ihre Anwendung dieselben Anweisungen verwenden.
Beispielanwendung ausprobieren
Installieren Sie zunächst Node.js 26,
Corepack und cURL. Als Laufzeitumgebung wurde Node.js 26.12.1 getestet;
verwenden Sie für Neuinstallationen eine gepflegte Patchversion von Node.js 26. Corepack ist eine
separate Voraussetzung. Beginnen Sie in einem neuen, leeren Verzeichnis außerhalb eines bestehenden
Node-Projekts und folgen Sie der README zum Beispiel, um die Anwendung
zu installieren und herunterzuladen. Sie legt Yarn 4.12.0, @transloadit/node 4.14.0,
zod 3.25.76 und zod-to-json-schema 3.25.2 als getestete
Kombination fest, ohne zu behaupten, dies seien die neuesten Pakete. Führen Sie die
Installationsbefehle einzeln aus und stoppen Sie, falls ein Befehl fehlschlägt.
Laden Sie sowohl background-remover/run.ts als auch shared/runtime.ts mit den
Befehlen aus der README herunter. Ihre relative Verzeichnisstruktur ist wichtig: Das Programm
importiert ../shared/runtime.ts. Führen Sie den Befehl --help aus der
README aus, bevor Sie den Zugriff konfigurieren; er funktioniert ohne Zugangsdaten. Behalten Sie die
generierte Lockdatei bei, wenn Sie das Beispiel anpassen.
Exportieren Sie Ihre bestehenden Zugangsdaten in derselben Shell und ersetzen Sie die Platzhalter lokal:
export TRANSLOADIT_AUTH_KEY='YOUR_AUTH_KEY'
export TRANSLOADIT_AUTH_SECRET='YOUR_AUTH_SECRET'
Halten Sie das Auth Secret aus der Versionsverwaltung und aus Browsercode fern. Das Programm liest diese Umgebungsvariablen direkt; es lädt keine Umgebungsdatei.
Legen Sie Ihr Bild unter input.jpg ab oder ersetzen Sie das Eingabeargument durch
den Pfad zu Ihrem Bild. Wählen Sie einen Ausgabedateinamen, der noch nicht existiert. Mit der
Ausführung dieses Befehls autorisieren Sie eine kostenpflichtige Verarbeitung:
node background-remover/run.ts --input ./input.jpg --output ./result.png
Bei Erfolg gibt das Terminal Saved aus,
gefolgt vom lokalen Ausgabepfad. Öffnen Sie result.png in einem Bildeditor, der
Transparenz anzeigt, oder legen Sie das Bild über einen kontrastreichen Hintergrund. Prüfen Sie, ob
der Hintergrund transparent geworden ist und Motiv, Kanten und feine Details weiterhin nutzbar
sind. Eine abgeschlossene Assembly und ein gültiges PNG allein belegen noch keine gute Freistellung.
Das Ausführungsprogramm lehnt ein bereits vorhandenes Ziel ab, bevor es eine Assembly übermittelt. Ein erneuter Lauf benötigt daher einen neuen Ausgabedateinamen. Es begrenzt das heruntergeladene Ergebnis auf 20 MiB, räumt der Verarbeitung bis zu fünf Minuten ein und setzt für den Ergebnisdownload ein separates Zeitlimit von 30 Sekunden. Falls ein Lauf nach der Ausgabe einer Assembly ID fehlschlägt, prüfen Sie diese Assembly in der Console, bevor Sie es erneut versuchen. Ein lokales Zeitlimit oder eine Unterbrechung belegt nicht, dass die Verarbeitung auf dem Server gestoppt wurde. Auch eine fehlgeschlagene Verarbeitung kann berechnet werden. Das Ausführungsprogramm führt eine Assembly nicht automatisch erneut aus.
Empfohlene Eingabebilder
Beginnen Sie mit einem nicht sensiblen Produktfoto mit klaren Konturen oder einem Porträt, das Sie hochladen dürfen. Vergleichen Sie das gespeicherte PNG im selben Maßstab mit dem Original. Haare, lichtdurchlässige Materialien, Schatten und Vordergrundobjekte, die dem Hintergrund ähneln, erfordern eine genaue Prüfung. Wählen Sie ein anderes Eingabebild, falls die Freistellung etwas entfernt, das Sie benötigen.
Nächste Schritte
Nachdem Sie die Freistellung geprüft haben, können Sie die heruntergeladene Konfiguration um Steps zur Größenänderung oder zur Erstellung von Thumbnails ergänzen. Die Robot-Dokumentation beschreibt die verfügbaren Optionen zur Hintergrundentfernung. Behalten Sie das lokale PNG als geprüftes Ergebnis, bevor Sie einen umfangreicheren Upload-Workflow entwickeln.