Image Background Remover

/* 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; } /* 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; } /* 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; } 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 = `Removed Background`; downloadButton.href = imgUrl; downloadButton.download = 'background_removed_image.png'; downloadButton.style.display = 'inline-block'; } catch (error) { console.error('Error removing background:', error); } }); });