Create an Image Background Remover App Using HTML CSS & JavaScript

Last Updated : 04 Mar, 2024

Building an Image Background Remover using HTML, CSS, and JavaScript demonstrates the power of combining these technologies to create interactive and user-friendly applications. The clean design and intuitive features make this tool not only functional but also enjoyable for users to interact with. The goal of our project is to provide users with a simple and intuitive interface for removing backgrounds from images.

bgRemover

Approach:

Start with a basic HTML structure that includes elements for image input, previews, and action buttons.
In the CSS file, we’ve defined styles for the container, input file, image previews, and action buttons. The design focuses on clean lines, easy-to-read fonts, and interactive buttons.
In the JavaScript file, we’ve implemented logic for handling image input, sending requests to the remove.bg API for background removal, and displaying the results. The user can also download the processed image with a single click.

Example: The below code example illustrates the creation of image background remover app using HTML, CSS, and Javascript.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0"> 
    <title> 
        Image Background Remover 
    </title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>Image Background Remover</h1> 
        <div class="input-file"> 
            <label for="userImg" class="info_text"> 
                Select a File 
            </label> 
            <input type="file" id="userImg" 
                class="form-control-file" required> 
        </div> 
        <div class="d-flex mb-4"> 
            <div id="imagePreview" class="image-preview"></div> 
            <div id="bgRemove" class="image-preview"></div> 
        </div> 
        <a id="downloadButton" class="btn btn-download" 
            style="display: none;"> 
            Download 
        </a> 
        <div> 
            <button id="removeBackground" class="btn btn-primary"> 
                Remove Background 
            </button> 
        </div> 
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* Center content vertically and horizontally */
.container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 80vh; 
    padding: 20px; 
    border: 1px solid #0e0c0c; 
    border-radius: 10px; 
    max-width: 600px; 
    margin: 0 auto; 
    background-color: #e3f7f7; 
} 
  
/* Title styles */
h1 { 
    text-align: center; 
    margin-bottom: 20px; 
} 
  
/* Style input file button */
.input-file { 
    margin-bottom: 20px; 
} 
  
/* Style image previews */
.image-preview { 
    border: 2px solid #ccc; 
    border-radius: 5px; 
    margin-right: 10px; 
    overflow: hidden; 
    width: 200px; 
    height: 200px; 
    display: inline-block; 
} 
  
.image-preview img { 
    width: 100%; 
    height: 100%; 
} 
  
/* Style remove background button */
.btn-remove-bg { 
    background-color: #007bff; 
    color: #fff; 
    border: none; 
    border-radius: 5px; 
    padding: 10px 20px; 
    font-size: 16px; 
    cursor: pointer; 
} 
  
.btn-remove-bg:hover { 
    background-color: #0056b3; 
}

Javascript

document.addEventListener('DOMContentLoaded', function () { 
    const inputField =  
        document.getElementById('userImg'); 
    const removeBackgroundButton =  
        document.getElementById('removeBackground'); 
    const imagePreview =  
        document.getElementById('imagePreview'); 
    const bgRemove =  
        document.getElementById('bgRemove'); 
    const downloadButton =  
        document.getElementById('downloadButton'); 
  
    inputField.addEventListener('change', function () { 
        const file = this.files[0]; 
        const reader = new FileReader(); 
  
        reader.onload = function (e) { 
            const img = document.createElement('img'); 
            img.src = e.target.result; 
            imagePreview.innerHTML = ''; 
            imagePreview.appendChild(img); 
        } 
  
        reader.readAsDataURL(file); 
    }); 
  
    removeBackgroundButton.addEventListener('click',  
        async function () { 
        const file = inputField.files[0]; 
        const formData = new FormData(); 
        formData.append('image_file', file); 
  
        try { 
            const response =  
            await fetch('https://api.remove.bg/v1.0/removebg', { 
                method: 'POST', 
                headers: { 
                    'X-Api-Key': '39nH2XMTcoAxnogxmqVBuAXH', 
                }, 
                body: formData, 
            }); 
  
            const result = await response.blob(); 
            const imgUrl = URL.createObjectURL(result); 
            bgRemove.innerHTML =  
                `<img src="${imgUrl}" alt="Removed Background">`; 
            downloadButton.href = imgUrl; 
            downloadButton.download =  
                'background_removed_image.png'; 
            downloadButton.style.display =  
                'inline-block'; 
        } catch (error) { 
            console.error('Error removing background:', error); 
        } 
    }); 
}); 