JavaScript 統合

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

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

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

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

    }
}