browse on your device

AI powered background remover
Leverage the power of artificial intelligence to seamlessly strip away backgrounds from your photos. Perfect for design projects, presentations, and more. It’s effortless, efficient, and just a click away.
let messages = ["Removing the background…", "Refining the edges…", "Applying AI magic..."]; let currentMessageIndex = 0; let messageInterval;
function startSpinner() { // Reset currentMessageIndex currentMessageIndex = 0;
// Start the interval messageInterval = setInterval(function() { // Update the message document.querySelector('#spinner-message').textContent = messages[currentMessageIndex];
// Move to the next message currentMessageIndex++;
// If we've shown all messages, stop the interval if (currentMessageIndex >= messages.length) { clearInterval(messageInterval); } }, 2000); // Change message every 2 seconds }
function stopSpinner() { // Stop the interval clearInterval(messageInterval); }
let dropZone = document.querySelector('.box');
// Prevent default drag behaviors ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { dropZone.addEventListener(eventName, preventDefaults, false) });
function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); }
// Highlight drop area when item is dragged over it ['dragenter', 'dragover'].forEach(eventName => { dropZone.addEventListener(eventName, highlight, false) });
['dragleave', 'drop'].forEach(eventName => { dropZone.addEventListener(eventName, unhighlight, false) });
function highlight(e) { dropZone.classList.add('highlight') }
function unhighlight(e) { dropZone.classList.remove('highlight') }
// Handle dropped files dropZone.addEventListener('drop', handleDrop, false);
function handleDrop(e) { let dt = e.dataTransfer; let files = dt.files;
handleFiles(files); }
function handleFiles(files) { for(let i = 0; i < files.length; i++) { uploadFile(files[i]); } } function uploadFile(file) { var reader = new FileReader(); reader.onloadend = function() { let dataURL = reader.result; document.querySelector('#imagePreview').src = dataURL; document.querySelector('#imagePreview').style.display = 'block'; document.querySelector('#uploadPrompt').style.display = 'none'; document.querySelector('.remove').style.display = 'block'; } reader.readAsDataURL(file); imageSource = URL.createObjectURL(file); // Set imageSource immediately // Mimic the input change event let dt = new DataTransfer(); dt.items.add(file); document.querySelector('#imageFile').files = dt.files; document.querySelector('#imageFile').dispatchEvent(new Event('change')); } function toggleButtons(afterState = false) { if (afterState) { document.querySelector('#removeBackgroundButton').style.display = 'none'; document.querySelector('#downloadLink').style.display = 'block'; /*document.querySelector('#customizeButton').style.display = 'block';*/ } else { document.querySelector('#removeBackgroundButton').style.display = 'block'; document.querySelector('#downloadLink').style.display = 'none'; /*document.querySelector('#customizeButton').style.display = 'none';*/ } } document.querySelector('#imageFile').addEventListener('change', function() { let imageFile = this.files[0]; if (imageFile) { let reader = new FileReader(); reader.onloadend = function() { document.querySelector('#imagePreview').src = reader.result; imageSource = reader.result; // Add this line document.querySelector('#imagePreview').style.display = 'block'; document.querySelector('#uploadPrompt').style.display = 'none'; document.querySelector('.remove').style.display = 'block'; document.querySelector('.box').classList.remove('after'); toggleButtons(false); // Reset to original button state } reader.readAsDataURL(imageFile); } }); document.querySelector('.remove').addEventListener('click', function(event) { event.stopPropagation(); document.querySelector('#imagePreview').src = "https://19908047.fs1.hubspotusercontent-na1.net/hubfs/19908047/marqadd-img.svg"; document.querySelector('#imagePreview').style.display = 'block'; document.querySelector('#uploadPrompt').style.display = 'block'; document.querySelector('#error').textContent = ''; document.querySelector('.remove').style.display = 'none'; document.querySelector('.box').classList.remove('after'); toggleButtons(false); document.querySelector('.skeleton').style.display = 'block'; imageSource = null; document.querySelector('#imageFile').value = null; setTimeout(function() { document.querySelector('.skeleton').style.display = 'none'; }, 1000); }); let imageSource = null; document.querySelector('#sampleImage').addEventListener('click', async function(event) { event.stopPropagation(); let imageUrl = this.src; let response = await fetch(imageUrl); let data = await response.blob(); let metadata = { type: 'image/jpeg' }; let file = new File([data], "test.jpg", metadata); let dt = new DataTransfer(); dt.items.add(file); document.querySelector('#imageFile').files = dt.files; document.querySelector('#imageFile').dispatchEvent(new Event('input')); // add this line // Create an object URL from the Blob data let objectURL = URL.createObjectURL(data); document.querySelector('#imagePreview').src = objectURL; imageSource = this.src; document.querySelector('#error').textContent = ''; document.querySelector('#imagePreview').style.display = 'block'; document.querySelector('#uploadPrompt').style.display = 'none'; document.querySelector('.remove').style.display = 'block'; document.querySelector('.box').classList.remove('after'); toggleButtons(false); }); document.querySelector('#uploadBox').addEventListener('click', function(event) { // If the click event was not on the .remove or #sampleImage elements if (!event.target.classList.contains('remove') && event.target.id !== 'sampleImage') { document.querySelector('#imageFile').click(); // Programmatically click the file input } }); async function removeBackground() { try { let imageFile = document.querySelector('#imageFile').files[0]; // If the sample image is selected, use a predefined image if (imageSource === document.querySelector('#sampleImage').src) { let predefinedImageUrl = 'https://drive.google.com/uc?export=download&id=12CN7wmsw_N4QUrEVotMV3oNpciRzAn4W'; document.querySelector('.skeleton').style.display = 'block'; document.querySelector('.loader').style.display = 'flex'; startSpinner(); document.querySelector('#imagePreview').src = predefinedImageUrl; document.querySelector('.box').classList.add('after'); document.querySelector('#downloadLink').href = predefinedImageUrl; setTimeout(function() { toggleButtons(true); document.querySelector('.loader').style.display = 'none'; // Hide spinner stopSpinner(); document.querySelector('.skeleton').style.display = 'none'; // Hide skeleton }, 2000); return; // Exit the function } if (!imageFile) { document.querySelector('#error').textContent = 'Please select an image'; return; } document.querySelector('#error').textContent = ''; document.querySelector('.skeleton').style.display = 'block'; document.querySelector('.loader').style.display = 'flex'; startSpinner(); let formData = new FormData(); formData.append('image_file', imageFile); formData.append('sync', '1'); /* let response = await fetch('https://www.marq.com/backremover.php', { method: 'POST', body: formData }); */ let response = await fetch('/create/backremover.php', { method: 'POST', body: formData }); if(response.ok) { let json = await response.json(); console.log(json); if (json.status != 200 ) { document.querySelector('#error').textContent = json.message; } else { document.querySelector('#imagePreview').src = json.data.image; document.querySelector('#downloadLink').href = json.data.image; document.querySelector('.box').classList.add('after'); toggleButtons(true); } } else { let json = await response.json(); document.querySelector('#error').textContent = json.message; } } catch (error) { document.querySelector('#error').textContent = error.message; } finally { document.querySelector('.loader').style.display = 'none'; stopSpinner(); document.querySelector('.skeleton').style.display = 'none'; } } document.querySelector('#downloadLink').addEventListener('click', function(event) { event.preventDefault(); // Prevent the default download action document.querySelector('#downloadModal').style.display = 'flex'; // Show the modal }); document.querySelector('#close-btn').addEventListener('click', function() { document.querySelector('#downloadModal').style.display = 'none'; }); document.querySelector('#modalSignupButton').addEventListener('click', function() { window.open('https://app.marq.com/users/registerLevel#/pricing', '_blank'); // Open sign-up in a new tab document.querySelector('#downloadModal').style.display = 'none'; window.location.href = document.querySelector('#downloadLink').href; // Trigger the download in the original tab });