Advanced Watermark Adder Tool
body{margin:0;font-family:Segoe UI,Arial;background:#fff;color:#111}
.wrapper{max-width:1200px;margin:auto;padding:25px}
h1{color:#0b5cff}
.card{
background:#fff;
border-radius:22px;
padding:20px;
box-shadow:0 40px 90px rgba(0,0,0,.15);
transform:perspective(1200px) rotateX(3deg);
}
.controls{
display:flex;
flex-wrap:wrap;
gap:10px;
}
input,select,button{
padding:10px;
border-radius:8px;
border:1px solid #ccc;
}
button{
background:#0b5cff;
color:#fff;
cursor:pointer;
}
button:hover{background:#083fae}
canvas{
width:100%;
margin-top:15px;
border-radius:15px;
background:#f2f2f2;
}
.templates{
margin-top:20px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:12px;
}
.temp{
border:1px solid #ddd;
border-radius:12px;
padding:10px;
cursor:pointer;
}
.temp:hover{background:#f5f7ff}
.sample{
font-size:18px;
text-align:center;
margin-bottom:6px;
}
.hint{font-size:13px;color:#555;margin-top:8px}
Advanced Watermark Adder – Part 2
✍️ Name
tagline
Signature + Tagline
／Diagonal／
Diagonal Center
👉 Template par click karo → watermark apply hoga → drag karke set karo
const canvas=document.getElementById("canvas");
const ctx=canvas.getContext("2d");
let baseImg=null, wm=null, drag=false, ox, oy, imgAngle=0;
imgUpload.onchange=e=>{
const img=new Image();
img.onload=()=>{
baseImg=img;
canvas.width=img.width;
canvas.height=img.height;
draw();
};
img.src=URL.createObjectURL(e.target.files[0]);
};
function addTemplate(type){
const text=textInput.value||"Your Brand";
wm={type,text,x:100,y:100,w:250,h:60,angle:0};
wm.style=type;
draw();
}
function rotateImage(){
imgAngle+=90;
draw();
}
function rotateWM(){
if(wm){wm.angle+=15;draw();}
}
function draw(){
if(!baseImg)return;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.translate(canvas.width/2,canvas.height/2);
ctx.rotate(imgAngle*Math.PI/180);
ctx.drawImage(baseImg,-baseImg.width/2,-baseImg.height/2);
ctx.restore();
if(!wm)return;
ctx.save();
ctx.translate(wm.x,wm.y);
ctx.rotate(wm.angle*Math.PI/180);
ctx.font="40px Arial";
if(wm.style==="shadow"){
ctx.shadowColor="#000";ctx.shadowBlur=6;
}
if(wm.style==="transparent"){
ctx.globalAlpha=.3;
}
if(wm.style==="bold"){
ctx.font="900 42px Arial";
}
if(wm.style==="invert"){
ctx.fillStyle="#fff";
ctx.strokeStyle="#000";
ctx.lineWidth=6;
ctx.strokeText(wm.text,0,40);
}
if(wm.style==="diagonal"){
ctx.rotate(-30*Math.PI/180);
}
ctx.fillStyle="#fff";
ctx.fillText(wm.text,0,40);
ctx.restore();
}
canvas.onmousedown=e=>{
if(!wm)return;
const r=canvas.getBoundingClientRect();
const mx=e.clientX-r.left,my=e.clientY-r.top;
if(mx>wm.x && mxwm.y && my{
if(!drag)return;
const r=canvas.getBoundingClientRect();
wm.x=e.clientX-r.left-ox;
wm.y=e.clientY-r.top-oy;
draw();
};
canvas.onmouseup=()=>drag=false;
canvas.onmouseleave=()=>drag=false;
