Integración API Web / HTML

Flujo de Integración Recomendado

Para una máxima seguridad, tu clave API nunca debe exponerse directamente dentro del código JavaScript del frontend.

Formulario de Carga HTML

Crea una interfaz simple de carga que permita a los usuarios seleccionar y subir imágenes.

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

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

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

JavaScript Frontend

Envía de forma segura las imágenes cargadas a tu endpoint backend utilizando solicitudes Fetch de JavaScript.

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}">
    `;
}

Responsabilidades del Backend

• Almacenar las claves API de forma segura en el servidor.
• Validar correctamente los archivos de imagen cargados.
• Enviar solicitudes API seguras a los servidores de ByByBG.
• Devolver imágenes PNG transparentes procesadas.
• Gestionar correctamente errores API y solicitudes inválidas.

Reglas Importantes de Seguridad

• Utiliza endpoints proxy backend seguros.
• Almacena las claves API en variables de entorno.
• Valida las cargas en el lado del servidor.
• Aplica límites de tamaño de carga por seguridad.
• Evita abusos mediante sistemas de limitación de solicitudes.

Errores Comunes de la API