Posts

Showing posts with the label background-remover.js

bg

Image Background Remover

Image Background Remover

$(function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var imageInput = document.getElementById("imageInput"); var removeBackgroundBtn = document.getElementById("removeBackgroundBtn"); var downloadLink = document.getElementById("downloadLink"); imageInput.addEventListener("change", function() { var file = imageInput.files[0]; var reader = new FileReader(); reader.onload = function(event) { var image = new Image(); image.onload = function() { canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0); }; image.src = event.target.result; }; reader.readAsDataURL(file); }); removeBackgroundBtn.addEventListener("click", function() { var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var magicWand = new MagicWand(imageData); magicWand.start(0, 0, function(x, y) { return imageData.data[(y * imageData.width + x) * 4] !== 0; }); magicWand.end(function() { ctx.putImageData(magicWand.getImageData(), 0, 0); downloadLink.href = canvas.toDataURL("image/png"); downloadLink.style.display = "block"; }); }); });