const inputImage = document.getElementById(‘inputImage’);
const outputImage = document.getElementById(‘outputImage’);
const downloadButton = document.getElementById(‘downloadButton’);
inputImage.addEventListener(‘change’, () => {
const file = inputImage.files[0];
const reader = new FileReader();
reader.onload = (event) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement(‘canvas’);
const ctx = canvas.getContext(‘2d’);
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
// Perform background removal here
// This example simply makes the background transparent
ctx.globalCompositeOperation = ‘destination-out’;
ctx.fillStyle = ‘white’;
ctx.fillRect(0, 0, img.width, img.height);
outputImage.src = canvas.toDataURL();
downloadButton.disabled = false;
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});
downloadButton.addEventListener(‘click’, () => {
const link = document.createElement(‘a’);
link.href = outputImage.src;
link.download = ‘output.png’;
link.click();
});