Intégration JavaScript

Flux de téléversement JavaScript

JavaScript permet de téléverser des images, d’envoyer des requêtes à des points de terminaison backend et d’afficher instantanément les images traitées par IA dans les applications web.

Structure HTML

Créez un champ simple de téléversement d’image et un conteneur de résultats pour les utilisateurs.

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

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

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

Exemple JavaScript avec Fetch API

Téléversez des images à l’aide de requêtes JavaScript asynchrones et affichez instantanément les résultats PNG traités.

async function removeBg(){

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

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

    if(!fileInput.files.length){

        alert("Select image first");

        return;
    }

    const formData = new FormData();

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

    result.innerHTML =
    "Processing...";

    try{

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

        if(!response.ok){
            throw new Error();
        }

        const blob =
        await response.blob();

        const url =
        URL.createObjectURL(blob);

        result.innerHTML = `
            <img src="${url}"
            style="max-width:100%;">

            <br><br>

            <a href="${url}"
            download="no-bg.png">
                Download PNG
            </a>
        `;

    }catch{

        result.innerHTML =
        "Something went wrong";

    }
}

Fonctionnalités d’interface recommandées

• Téléversement par glisser-déposer.
• Indicateurs de progression et animations de chargement.
• Aperçus des images avant le téléversement.
• États de traitement animés.
• Boutons de téléchargement pour les images PNG.
• Messages d’erreur conviviaux.

Recommandations de sécurité

• Utilisez des points de terminaison proxy backend pour les requêtes API.
• Validez les images téléversées côté serveur.
• Appliquez des limites de taille de téléversement.
• Bloquez les formats d’image non pris en charge.
• Utilisez la limitation de débit et le contrôle des requêtes.

Erreurs JavaScript courantes