0

I am trying to use the Remove.bg API in a plain JS file, with the goal of passing image URLS as parameters and then outputting the resulting image to an IMG tag within the HTML body.

Unfortunately, the project does not provide documentation for such usage, as the results.data is intended to be used by FileSystem's writeFileSync, which I cannot use as I am running a static website.

Is there per chance, any way to parse the results as described and perhaps set an IMG tag's src to the resulting, background-removed image?

Below is an example code that so far DOES return a response. Thank you in advance for your time!

   function removebackground(){    
            let formData = {
                "image_file_b64": "",
                "image_url": "https://meta.hapeprime.com/7386.png",
                "size": "preview",
                "type": "auto",
                "type_level": "1",
                "format": "auto",
                "roi": "0% 0% 100% 100%",
                "crop": false,
                "crop_margin": "0",
                "scale": "original",
                "position": "original",
                "channels": "rgba",
                "add_shadow": false,
                "semitransparency": true,
                "bg_color": "",
                "bg_image_url": ""
                };

            axios({
            method: 'post',
            url: 'https://api.remove.bg/v1.0/removebg',
            data: formData,
            responseType: 'arraybuffer',
            headers: {
                
                'X-Api-Key': 'API_KEY',
            },
            encoding: null
            })
            .then((response) => {
            if(response.status != 200) return console.error('Error:', response.status, response.statusText);
            console.log(response);
            
            })
            .catch((error) => {
                return console.error('Request failed:', error);
            });
        }
Mig82
  • 4,856
  • 4
  • 40
  • 63
Krow Caw
  • 37
  • 5

1 Answers1

0

It depends on the response type of the API.

If it's like the https://clipdrop.co/apis/docs/remove-background API it will respond with a blob, with it you can use URL.createObjectURL(response) to create a valid src path : you can find an example here : https://github.com/initml/clipdrop-api-samples/blob/main/web/remove-objects-tfjs/components/Result.tsx#L63

cigien
  • 57,834
  • 11
  • 73
  • 112
Igor Eschalier
  • 1