<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove Background App</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
#preview, #result {
max-width: 100%;
margin: 10px auto;
display: block;
}
.hidden {
display: none;
}
</style>
<h1>Remove Background App</h1>
<p>Upload your image to remove its background:</p>
<!-- Input File -->
<input type="file" id="imageInput" accept="image/*" class="form-control">
<!-- Preview Image -->
<img id="preview" src="" alt="Preview" class="hidden img-responsive">
<!-- Result Image -->
<img id="result" src="" alt="Result" class="hidden img-responsive">
<!-- Status -->
<p id="status" class="hidden">Processing, please wait...</p>
<!-- Script -->
<script>
const imageInput = document.getElementById('imageInput');
const preview = document.getElementById('preview');
const result = document.getElementById('result');
const status = document.getElementById('status');
// Handle file upload
imageInput.addEventListener('change', async (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = () => {
preview.src = reader.result;
preview.classList.remove('hidden');
};
reader.readAsDataURL(file);
// Show status
status.classList.remove('hidden');
status.textContent = "Processing, please wait...";
// Send to API
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': 'YOUR_API_KEY_HERE'
},
body: formData
});
if (!response.ok) throw new Error('Failed to remove background');
const blob = await response.blob();
result.src = URL.createObjectURL(blob);
result.classList.remove('hidden');
status.classList.add('hidden');
} catch (error) {
status.textContent = "Error: " + error.message;
}
}
});
</script>