Directly Removing Image Backgrounds with JavaScript: A Detailed Guide

In this tutorial, we will create an application to remove the background from images directly in the browser using the @imgly/background-removal npm package. The application will have a simple user interface where users can upload an image and get the background removed image as a result.

Setup the project

First, we need to set up our project. We will create a new project using create-react-app for this tutorial. You can create a new project using the following command:

npx create-react-app background-removal

Now, navigate to the project directory:

cd background-removal

Install the required package

We need to install the @imgly/background-removal package. You can install it using npm or yarn. Here we will use npm github:

npm install @imgly/background-removal

Create a component to upload image

Now, we will create a ImageUpload component. This component will render an input of type file where users can upload an image.

import React, {useState} from 'react';

function ImageUpload() {
  const [image, setImage] = useState();

  const handleImageUpload = (event) => {
    const file = event.target.files[0];
    setImage(URL.createObjectURL(file));
  }

  return (
    <div>
      <input type="file" onChange={handleImageUpload} />
      <img src={image} alt="" />
    </div>
  )
}

export default ImageUpload;

Here, we are using the useState hook to store the uploaded image. When a user uploads an image, we create an object URL for the file and store it in the state. We also display the uploaded image using an img tag.

Remove the background from the uploaded image

Now, we will use the package to remove the background from the uploaded image. First, we import the package in our component.

import imglyRemoveBackground from "@imgly/background-removal";

Next, we modify the handleImageUpload function to remove the background from the uploaded image.

const handleImageUpload = async (event) => {
  const file = event.target.files[0];
  const blob = await imglyRemoveBackground(file);
  const url = URL.createObjectURL(blob);
  setImage(url);
}

In this function, we pass the uploaded file to the imglyRemoveBackground function. This function returns a promise that resolves to a blob of the image with the background removed. We then create an object URL for this blob and store it in the state.

Render the component in the App

Finally, we render the ImageUpload component in the App component.

import React from 'react';
import ImageUpload from './ImageUpload';

function App() {
  return (
    <div className="App">
      <ImageUpload />
    </div>
  );
}

export default App;

Now, you can run your application:

npm start

And you will see an input field in the browser where you can upload an image. Once you upload an image, the application will remove the background from the image and display the result.

This is a basic implementation of in-browser background removal. You can extend this application by adding more features like allowing users to download the resulting image, adding a progress bar to show the progress of the background removal process, etc.

(Optional) Download the ONNX model and WASM files

The background-removal package uses an ONNX model and WASM files for background removal. These files are hosted on UNPKG and are downloaded automatically when you use the imglyRemoveBackground function for the first time.

you can also download these files manually and host them on your own server. This can be useful if you want to have more control over the files or if you want to reduce the load on UNPKG.

Here's how you can do it:

1. Download the .onnx and .wasm files from UNPKG. The URLs of these files can be found in the @imgly/background-removal package documentation.
2. Copy the downloaded files to your public path. You can do this using the cp command:

cp path_to_downloaded_files/* $PUBLIC_PATH

Replace path_to_downloaded_files with the path where you downloaded the files and $PUBLIC_PATH with the path where you want to host the files.

Configure the package to use the downloaded files

After you have downloaded the files and hosted them on your own server, you need to configure the package to use these files instead of the ones on UNPKG.

You can do this by passing a Config object to the imglyRemoveBackground function. This object should have a publicPath property that points to the path where you are hosting the files:

import imglyRemoveBackground, {Config} from "@imgly/background-removal"

const public_path = "https://example.com/assets/" ; // the path where assets are served from

let config: Config =  {
  publicPath: public_path, // path to the wasm and onnx files
};

let image_src = ...; // the source of the image

imglyRemoveBackground(image_src, config).then((blob: Blob) => {
  // result is a blob encoded as PNG.
  // It can be converted to an URL to be used as HTMLImage.src
  const url = URL.createObjectURL(blob);
})

Now, the imglyRemoveBackground function will use the ONNX model and WASM files hosted on your own server for background removal.