How to use in an html5+JS project？

[aoteman44]

I didn't find background-removal.js in the project and don't know how to use it

[collinph]

Any updates on this?

[SaBenBurra]

any update?

[hhtuan206]

You can using cdn of jsdelivr https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.5.5/+esm
Here is script using

<script type="module">
        import { removeBackground, preload } from 'https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.5.5/+esm'

        const config = {
            // path contain assert, you can take all from here https://staticimgly.com/@imgly/background-removal-data/YOUR_PACKAGE_VERSION/package.tgz
            publicPath: 'http://127.0.0.1:5500/dist/', 
        };
       // load onnx model first
        preload(config).then(() => {
            console.log("Asset preloading succeeded")
        })
        let image = document.getElementById('resultImage') // image tag
        document.getElementById('imageInput').addEventListener('change', async function (event) {
            const file = event.target.files[0];
            if (file) {
                try {
                    // Remove background
                    removeBackground(file,).then((blob) => {
                        const url = URL.createObjectURL(blob);
                        // Display the result
                        image.src = url;
                    });
                    
                } catch (error) {
                    console.error('Error removing background:', error);
                }
            }
        });
</script>

[fabiankraxenberger]

I´ve tried the code above and ended up with this error:

Uncaught (in promise) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
inference.ts:34

Is it because of the file format?

$("#progimg").on('click', ()=>{ 
    console.log("Button Pressed");
    const file = $('#img').get(0); // Foreground
    console.log(file);
    if (file) {
        try {
            // Remove background
            removeBackground(file).then((blob) => {
                const url = URL.createObjectURL(blob);
                // Display the result
                image.src = url;
            });
            
        } catch (error) {
            console.error('Error removing background:', error);
        }
    }
});