Erase BG
Sign Up

How to remove background from photo using Javascript

Are you looking to remove the background from a photo quickly and easily? One solution is to use a background eraser tool, such as the "Erase Background" API from erasebg.org. In this tutorial, we will walk you through the steps on how to use this API to remove the background from a photo, creating a transparent PNG image. Whether you're a developer looking to integrate this functionality into your project or a marketer looking to improve your product images, this tutorial is for you. Let's get started!

 

Getting an API Key for the Erase Background API

In order to use the Erase Background API from erasebg.org, you will need to obtain an API key. This key will allow you to access the API and perform background removal on your images.

The good news is that obtaining an API key is easy and free. Simply email support@erasebg.org with your request for a free API key. Once your request is approved, you will receive your key via email.

Be sure to keep your API key safe and do not share it with anyone else. Also, remember that there are limits on usage, so be sure to check the API documentation or contact the support team for more information.

 

Uploading image

In this example, I'm using FormData to send the binary file in the body of the request. It's important to note that this code is just an example, you need to replace "YourApiKey" and "Your image file" with your actual API key and image file.

 

var apiKey = "YourApiKey";
var taskGroup = "5b097982-cd39-45a9-a7fe-b923ea9eb588"; // Generate your own uuidv4 string
var originalImage = new File(["Your image file"], "image.jpg", {type: "image/jpeg"}); //This will create a binary file object. 
var callbackUrl = "string"; // Optional 

var formData = new FormData();
formData.append("task_group", taskGroup);
formData.append("original_image", originalImage);
formData.append("callback_url", callbackUrl);

var requestOptions = {
    method: 'POST',
    body: formData
};

fetch("https://erasebg.org/api/v1/background-remover/upload/?apiKey=" + apiKey, requestOptions)
    .then(response => response.json())
    .then(data => {
        console.log("Response: ", data);
    })
    .catch(error => {
        console.error("Error: ", error);
    });

 

How to get background removed image?

let webSocket = new WebSocket("wss://erasebg.org/ws/background-remover/{Your task group}/");

webSocket.onmessage = (event) => {
    console.log(event.data)
}

webSocket.onopen = () => {
     webSocket.send(JSON.stringify({
        "key":  "{Image key received after uploading the image}"
    }))
};

 

Why use Erase BG API?

The Erase Background API is a powerful tool that can help you improve the quality and consistency of your images while saving you time and effort. It uses advanced algorithms to remove backgrounds quickly and accurately, making it ideal for businesses and organizations that need to process a large number of images on a regular basis. The API can be integrated into a wide range of platforms and applications, such as web and mobile apps, e-commerce platforms, and image editing software, making it highly flexible.

One of the key benefits of the Erase Background API is that it automates the background removal process, eliminating the need for manual editing and allowing you to focus on other tasks. It also offers support and documentation, so you can easily integrate it into your workflow and get help if you have any questions. Additionally, it offers a free API key.

One of the best things about the Erase Background API is that it is constantly being upgraded. The model is being trained with new data which means that it is getting better and better at removing backgrounds accurately. This means that you can rely on the API to deliver high-quality results consistently and with minimal effort on your part.