<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Free Watermark Remover</title>
<style>
body {
background:#111;
color:#fff;
font-family: Arial, sans-serif;
text-align:center;
}
canvas {
border:2px solid #555;
margin-top:10px;
cursor: crosshair;
}
.controls {
margin:15px;
}
input, button {
padding:8px;
margin:5px;
}
</style>
</head>
<body>
<h2>🧼 Free Watermark Remover (HTML)</h2>
<p>Brush দিয়ে watermark এর ওপর আঁকুন</p>
<input type="file" id="upload" accept="image/*"><br>
<div class="controls">
Brush Size:
<input type="range" id="brush" min="5" max="50" value="20">
<button onclick="download()">Download Image</button>
</div>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const upload = document.getElementById("upload");
const brush = document.getElementById("brush");
let img = new Image();
let painting = false;
upload.addEventListener("change", e => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = () => {
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
img.src = reader.result;
};
reader.readAsDataURL(file);
});
canvas.addEventListener("mousedown", () => painting = true);
canvas.addEventListener("mouseup", () => painting = false);
canvas.addEventListener("mouseleave", () => painting = false);
canvas.addEventListener("mousemove", e => {
if (!painting) return;
ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(e.offsetX, e.offsetY, brush.value, 0, Math.PI * 2);
ctx.fill();
ctx.globalCompositeOperation = "source-over";
});
function download() {
const link = document.createElement("a");
link.download = "watermark_removed.png";
link.href = canvas.toDataURL();
link.click();
}
</script>
</body>
</html>
Leave a Reply