API und Integration
Installation von rembg.js
npm i @remove-background-ai/rembg.js
API-Nutzung in Node mit rembg.js
Wenn Sie die rembg.js-Bibliothek in einer Node-Umgebung nutzen, können Sie problemlos Funktionen zur Entfernung von Hintergründen in Ihre Anwendung integrieren. Hier ist eine Schritt-für-Schritt-Anleitung zur Einrichtung und Nutzung der API:
Einrichten Ihrer Umgebung: Stellen Sie sicher, dass Sie eine .env-Datei im Stammverzeichnis Ihres Projekts haben, die Ihren API-Schlüssel enthält.
Importieren der notwendigen Module: Beginnen Sie mit dem Import der rembg-Funktion von @remove-background-ai/rembg.js und dem dotenv-Modul zur Handhabung von Umgebungsvariablen.
Konfigurieren von Fortschritts-Callbacks: Die Bibliothek bietet onDownloadProgress- und onUploadProgress-Callbacks zur Verfolgung des Fortschritts von Dateioperationen. Im bereitgestellten Beispiel loggen wir diese Ereignisse direkt in die Konsole.
Jetzt werfen wir einen genaueren Blick auf ein Beispiel:
// script.mjs file
import { rembg } from '@remove-background-ai/rembg.js';
import dotenv from 'dotenv';
// Load environment variables from .env file
dotenv.config();
// API_KEY will be loaded from the .env file
const API_KEY = process.env.API_KEY;
// log upload and download progress
const onDownloadProgress = console.log;
const onUploadProgress = console.log;
rembg({
apiKey: API_KEY,
inputImage: './input.png', //inputImage can be one of these: string | Buffer | { base64: string };
onDownloadProgress,
onUploadProgress
}).then(({ outputImagePath, cleanup }) => {
console.log('✅🎉 background removed and saved under path=', outputImagePath);
// if called, it will cleanup (remove from disk) your removed background image
// cleanup();
});
Denken Sie daran, die Aufräumfunktion kann aufgerufen werden, wenn Sie das bearbeitete Bild nach der Entfernung des Hintergrunds von Ihrer Festplatte entfernen möchten.
Anzeigen der Fortschrittsleiste
Bei der Integration eines Dienstes zur Entfernung von Hintergründen ist es oft vorteilhaft, den Benutzern Feedback zum Fortschritt ihrer Upload- oder Download-Anfrage zu geben. Um dies zu erleichtern, können Sie Ihre eigenen onDownloadProgress- und onUploadProgress-Callbacks definieren. Beide Callbacks akzeptieren AxiosProgressEvent als Event-Parameter. Während die Anfrage fortschreitet, werden diese Callbacks mehrmals aufgerufen, sodass Sie beispielsweise eine Fortschrittsleiste anzeigen und ihre Länge basierend auf dem Fortschritt anpassen können.
(base) root@DESKTOP-C0Q8KK7:~/rembg.js-test# node index.mjs
{
loaded: 65687,
total: 68474,
progress: 0.9592984198381868, <---- @95% progress
bytes: 65687,
rate: undefined,
estimated: undefined,
upload: true <---- upload progress
}
{
loaded: 68474,
total: 68474,
progress: 1, <---- @100% progress
bytes: 2787,
rate: undefined,
estimated: undefined,
upload: true <---- upload progress
}
{
loaded: 1002,
total: 68824,
progress: 0.014558874811112402, <---- @1% progress
bytes: 1002,
rate: undefined,
estimated: undefined,
download: true <---- download progress
}
{
loaded: 68824,
total: 68824,
progress: 1, <---- @100% progress
bytes: 67822,
rate: undefined,
estimated: undefined,
download: true <---- download progress
}
✅🎉 background removed and saved under path=/tmp/rembg--3339-DBqqeJ2eOs4D-.png