JavaScript इंटीग्रेशन

JavaScript अपलोड वर्कफ़्लो

JavaScript इमेज अपलोड कर सकता है, बैकएंड Endpoints को अनुरोध भेज सकता है और वेब एप्लिकेशन के भीतर AI द्वारा प्रोसेस की गई इमेज तुरंत प्रदर्शित कर सकता है।

HTML संरचना

उपयोगकर्ताओं के लिए एक सरल इमेज अपलोड फ़ील्ड और परिणाम कंटेनर बनाएं।

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

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

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

JavaScript Fetch API उदाहरण

Async JavaScript अनुरोधों का उपयोग करके इमेज अपलोड करें और प्रोसेस की गई PNG इमेज तुरंत प्रदर्शित करें।

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

    }
}

अनुशंसित UI सुविधाएँ

• ड्रैग और ड्रॉप अपलोड।
• प्रोग्रेस इंडिकेटर और लोडर।
• अपलोड से पहले इमेज प्रीव्यू।
• एनिमेटेड प्रोसेसिंग स्टेट्स।
• PNG इमेज के लिए डाउनलोड बटन।
• उपयोगकर्ता-अनुकूल त्रुटि संदेश।

सुरक्षा अनुशंसाएँ

• API अनुरोधों के लिए बैकएंड प्रॉक्सी Endpoints का उपयोग करें।
• अपलोड की गई इमेज का सर्वर-साइड सत्यापन करें।
• अपलोड आकार सीमाएँ लागू करें।
• असमर्थित इमेज फ़ॉर्मेट्स को प्रतिबंधित करें।
• Rate Limiting और Request Throttling का उपयोग करें।

सामान्य JavaScript त्रुटियाँ