How to Build an Image Background Remover App with Vanilla JavaScript, HTML & CSS

Image Background Remover

Drag & Drop Image Here

White Threshold: 240

Removing image backgrounds is a powerful feature often reserved for advanced tools like Photoshop. But did you know you can build a basic background remover right in the browser using just HTML, CSS, and vanilla JavaScript?

In this tutorial, we’ll walk through how to build a simple image background remover app — no frameworks or libraries required.

---

🛠️ What We’re Building

A web app that lets users:

• Upload an image

• Detect and remove near-white backgrounds

• View and download the edited image directly in the browser

• ✅ PNG download support

• 🎚️ Fine-tune white threshold with a slider

• 🖱️ Drag-and-drop image upload

Let’s walk through how to build it using only HTML, CSS, and vanilla JavaScript—no frameworks or libraries!

🧱 Project Structure

We'll use:

• HTML for the file upload and layout

• CSS for basic styling

• Canvas API in JavaScript to manipulate image pixels and make the white background transparent

---

📦 Step-by-Step Guide

1. HTML Layout

Start with the basic structure. We add an input for uploading files, a canvas to render the image, and a button to trigger background removal.

<input type="file" id="imageUpload" accept="image/*" />

<canvas id="canvas"></canvas>

<button id="removeBgBtn">Remove White Background</button>

2. CSS Styling

Add some light styling for alignment:

body {

  font-family: Arial, sans-serif;

  text-align: center;

  margin-top: 50px;

}

canvas {

  border: 1px solid #ccc;

  margin-top: 20px;

}

3. JavaScript Logic

Here’s where the magic happens:

a. Load Image to Canvas

We use the FileReader API to load the uploaded image and draw it to the canvas.

javascript


const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let img = new Image();

document.getElementById('imageUpload').addEventListener('change', 
function(e) {
  const reader = new FileReader();
  reader.onload = function(event) {
    img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
    };
    img.src = event.target.result;
  };
  reader.readAsDataURL(e.target.files[0]);
});



b. Remove Background
We access pixel data and loop through each pixel. 
If it’s close to white (r > 240 && g > 240 && b > 240), 
we set the alpha channel to 0 (transparent):

document.getElementById('removeBgBtn').addEventListener('click', function() {

  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {

    const r = data[i];

    const g = data[i + 1];

    const b = data[i + 2];

    if (r > 240 && g > 240 && b > 240) {

      data[i + 3] = 0; // transparent

    }

  }

  ctx.putImageData(imageData, 0, 0);

});

🧪 Result

Upload any image with a white background. Click the “Remove White Background” button and watch the white pixels disappear!

---