Tool
SaiWebs Background Remover
Upload → Remove → Download PNG
Remove Background
Download PNG
const upload=document.getElementById("upload");
const canvas=document.getElementById("canvas");
const ctx=canvas.getContext("2d");
const status=document.getElementById("status");
let imageLoaded=false;
upload.addEventListener(
"change",
function(e){
const file=e.target.files[0];
if(!file){
return;
}
status.innerHTML="Loading image...";
const reader=new FileReader();
reader.onload=function(event){
const img=new Image();
img.onload=function(){
canvas.width=img.width;
canvas.height=img.height;
ctx.clearRect(
0,
0,
canvas.width,
canvas.height
);
ctx.drawImage(
img,
0,
0
);
imageLoaded=true;
status.innerHTML="Image loaded";
};
img.src=event.target.result;
};
reader.readAsDataURL(file);
}
);
function removeBackground(){
if(!imageLoaded){
alert("Please upload an image.");
return;
}
status.innerHTML="Processing...";
let imageData=ctx.getImageData(
0,
0,
canvas.width,
canvas.height
);
let data=imageData.data;
for(
let i=0;
i
||
(g>160 && r<170 && b<170) || (b>160 && r<170 && g<170) || (r>200 && g>200 && b>200)
){
data[i+3]=0;
}
}
ctx.putImageData(
imageData,
0,
0
);
status.innerHTML="Background removed";
}
function downloadImage(){
if(!imageLoaded){
alert("No image found.");
return;
}
const a=document.createElement("a");
a.href=canvas.toDataURL(
"image/png"
);
a.download="background-removed.png";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
status.innerHTML="Download started";
}


Users Today : 11