Alternative to fs.WriteFileSync for implementation of image parsing in Vanilla Javascript

Question

Hello everyone and thank you for your time in advance!

I want to implement the Remove.bg functionality on my Wix web page but unfortunately the necessary functions can not be implemented, specifically, FileSystem.writefilesync.

Below is an excerpt from the Remove.bg documentation on how to POST using Node.js

const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');

const formData = new FormData();
formData.append('size', 'auto');
formData.append('image_url', 'https://www.remove.bg/example.jpg');

axios({
  method: 'post',
  url: 'https://api.remove.bg/v1.0/removebg',
  data: formData,
  responseType: 'arraybuffer',
  headers: {
    ...formData.getHeaders(),
    'X-Api-Key': 'INSERT_YOUR_API_KEY_HERE',
  },
  encoding: null
})
.then((response) => {
  if(response.status != 200) return console.error('Error:', response.status, response.statusText);
  fs.writeFileSync("no-bg.png", response.data);
})
.catch((error) => {
    return console.error('Request failed:', error);
});

My Vanilla JS implementation so far is the following:

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': 'APIKEY',
                },
                encoding: null
                })
                .then((response) => {
                if(response.status != 200) return console.error('Error:', response.status, response.statusText);
                  //response.data  
                  console.log(response.data);
                  $(function () {
                    $( "#dialog" ).dialog({
                      autoOpen: false
                    });
                    var image = document.getElementById("testrmv");
                    image.src = "data:image/png;base64," + JSON.stringify(response.data);
                    
                      $("#dialog").dialog('open');
                    
                  });
                  
                  
                })
                .catch((error) => {
                    return console.error('Request failed:', error);
                });
            }

As you can see, I have also implemented a .dialog function to check whether the image is returned after it's parsed in Base64, but unfortunately it does not show

Are you fellas aware of any other way to parse the resulting ArrayBuffer response.data to an image and display it on the DOM?

Thank you once again!

Alternative to fs.WriteFileSync for implementation of image parsing in Vanilla Javascript

0 Answers0