Web- / HTML-API-Integration

Empfohlener Integrationsablauf

Für maximale Sicherheit sollte Ihr API-Schlüssel niemals direkt im Frontend-JavaScript offengelegt werden.

HTML-Uploadformular

Erstellen Sie eine einfache Upload-Oberfläche, mit der Benutzer Bilder auswählen und hochladen können.

<input type="file" id="imageInput">

<button onclick="removeBg()">
    Remove Background
</button>

<div id="result"></div>

Frontend-JavaScript

Senden Sie hochgeladene Bilder sicher über JavaScript-Fetch-Anfragen an Ihren Backend-Endpunkt.

async function removeBg(){

    const fileInput =
    document.getElementById("imageInput");

    const result =
    document.getElementById("result");

    if(!fileInput.files.length){
        alert("Select image");
        return;
    }

    const formData = new FormData();

    formData.append(
        "file",
        fileInput.files[0]
    );

    result.innerHTML = "Processing...";

    const response = await fetch(
        "/web/remove-bg",
        {
            method:"POST",
            body:formData
        }
    );

    if(!response.ok){

        result.innerHTML =
        "Something went wrong";

        return;
    }

    const blob =
    await response.blob();

    const url =
    URL.createObjectURL(blob);

    result.innerHTML = `
        <img src="${url}">
    `;
}

Aufgaben des Backends

• API-Schlüssel sicher auf dem Server speichern.
• Hochgeladene Bilddateien ordnungsgemäß validieren.
• Sichere API-Anfragen an die ByByBG-Server senden.
• Verarbeitete transparente PNG-Bilder zurückgeben.
• API-Fehler und ungültige Anfragen korrekt behandeln.

Wichtige Sicherheitsregeln

• Verwenden Sie sichere Backend-Proxy-Endpunkte.
• Speichern Sie API-Schlüssel in Umgebungsvariablen.
• Validieren Sie Uploads serverseitig.
• Legen Sie Upload-Größenbeschränkungen für mehr Sicherheit fest.
• Verhindern Sie Missbrauch durch Rate-Limiting-Systeme.

Häufige API-Fehler