Advanced Watermark Adder Tool
body{margin:0;font-family:Arial;background:#fff}
.wrapper{max-width:1200px;margin:auto;padding:20px}
h1{color:#0b5cff}
.card{
background:#fff;
border-radius:20px;
padding:20px;
box-shadow:0 35px 80px rgba(0,0,0,.15);
transform:perspective(1200px) rotateX(3deg);
}
.controls{
display:flex;flex-wrap:wrap;gap:10px;margin-bottom: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%;
background:#f3f3f3;
border-radius:15px;
touch-action:none;
}
.slider{width:150px}
Advanced Watermark Adder Tool
Simple Text
Signature + Tagline
© Copyright
Tiled Watermark
Shadow Text
Transparent
BOLD
Inverted Stroke
const canvas=document.getElementById("canvas");
const ctx=canvas.getContext("2d");
let baseImg=null;
let wm=null;
let dragging=false;
let startX,startY;
let scale=1, flipH=1, flipV=1;
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]);
};
logoUpload.onchange=e=>{
const img=new Image();
img.onload=()=>{
wm={type:"logo",img,x:100,y:100,w:img.width/3,h:img.height/3,angle:0};
draw();
};
img.src=URL.createObjectURL(e.target.files[0]);
};
function applyText(){
wm={
type:"text",
text:wmText.value||"Brand",
style:template.value,
x:150,y:150,w:200,h:50,angle:0
};
draw();
}
function applyLogo(){
if(!wm||wm.type!=="logo") alert("Logo upload karo");
}
function rotateWM(val){
if(wm){wm.angle=val;draw();}
}
function flipX(){flipH*=-1;draw()}
function flipY(){flipV*=-1;draw()}
function draw(){
if(!baseImg)return;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(baseImg,0,0);
if(!wm)return;
ctx.save();
ctx.translate(wm.x,wm.y);
ctx.rotate(wm.angle*Math.PI/180);
ctx.scale(flipH,flipV);
if(wm.type==="text"){
ctx.font="40px Arial";
ctx.fillStyle="#fff";
ctx.globalAlpha=1;
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.strokeStyle="#000";ctx.lineWidth=6;
ctx.strokeText(wm.text,0,40);
}
if(wm.style==="copyright"){
wm.text="© "+wm.text;
}
if(wm.style==="signature"){
ctx.font="italic 38px cursive";
ctx.fillText(wm.text,0,40);
ctx.font="20px Arial";
ctx.fillText("tagline here",0,65);
ctx.restore();return;
}
if(wm.style==="tile"){
for(let y=0;y<canvas.height;y+=120){
for(let x=0;x{
if(!wm)return;
dragging=true;
startX=e.offsetX-wm.x;
startY=e.offsetY-wm.y;
});
canvas.addEventListener("pointermove",e=>{
if(!dragging)return;
wm.x=e.offsetX-startX;
wm.y=e.offsetY-startY;
draw();
});
canvas.addEventListener("pointerup",()=>dragging=false);
canvas.addEventListener("pointerleave",()=>dragging=false);
