Advanced Watermark Adder Tool
body{
margin:0;
font-family:Segoe UI,Arial;
background:#ffffff;
color:#111;
}
.wrapper{
max-width:1200px;
margin:auto;
padding:30px 15px;
}
h1{color:#0b5cff;}
.tool-card{
background:#fff;
border-radius:20px;
padding:20px;
box-shadow:0 30px 80px rgba(0,0,0,0.15);
transform:perspective(1200px) rotateX(3deg);
}
.controls{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:15px;
}
input,button{
padding:10px;
border-radius:8px;
border:1px solid #ccc;
}
button{
background:#0b5cff;
color:#fff;
cursor:pointer;
}
button:hover{background:#0847c2;}
.canvas-wrap{
position:relative;
margin-top:15px;
}
canvas{
width:100%;
border-radius:15px;
background:#f4f4f4;
}
.hint{
font-size:14px;
color:#555;
margin-top:8px;
}
Advanced Watermark Adder (Part-1)
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let baseImage = null;
let wm = null;
let dragging = false;
let resizing = false;
let offsetX, offsetY;
document.getElementById("imgUpload").addEventListener("change", e=>{
const file = e.target.files[0];
if(!file) return;
const img = new Image();
img.onload = ()=>{
baseImage = img;
canvas.width = img.width;
canvas.height = img.height;
draw();
};
img.src = URL.createObjectURL(file);
});
document.getElementById("logoUpload").addEventListener("change", e=>{
const file = e.target.files[0];
if(!file) return;
const img = new Image();
img.onload = ()=>{
wm = {
type:"image",
img:img,
x:50,y:50,
w:img.width/3,
h:img.height/3,
angle:0
};
draw();
};
img.src = URL.createObjectURL(file);
});
function addText(){
const text = document.getElementById("wmText").value;
if(!text) return alert("Text likho");
wm = {
type:"text",
text:text,
x:100,y:100,
w:200,h:60,
angle:0
};
draw();
}
function rotateWM(){
if(!wm) return;
wm.angle += 15;
draw();
}
function draw(){
if(!baseImage) return;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(baseImage,0,0);
if(!wm) return;
ctx.save();
ctx.translate(wm.x, wm.y);
ctx.rotate(wm.angle * Math.PI/180);
if(wm.type==="text"){
ctx.font="40px Arial";
ctx.fillStyle="rgba(255,255,255,0.7)";
ctx.fillText(wm.text,0,40);
wm.w = ctx.measureText(wm.text).width;
wm.h = 40;
}else{
ctx.drawImage(wm.img,0,0,wm.w,wm.h);
}
ctx.restore();
}
canvas.addEventListener("mousedown",e=>{
if(!wm) return;
const rect = canvas.getBoundingClientRect();
const mx = e.clientX - rect.left;
const my = e.clientY - rect.top;
if(mx > wm.x && mx wm.y && my {
if(!dragging) return;
const rect = canvas.getBoundingClientRect();
wm.x = e.clientX - rect.left - offsetX;
wm.y = e.clientY - rect.top - offsetY;
draw();
});
canvas.addEventListener("mouseup",()=>dragging=false);
canvas.addEventListener("mouseleave",()=>dragging=false);
