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:140px}
Advanced Watermark Adder Tool
Simple Text
Signature + Tagline
© Copyright
Tiled Watermark
Shadow Text
Transparent
BOLD
Inverted Stroke
Elegant Signature
Bold Handwritten
Minimal Signature
Signature + Small Tagline
Signature + Long Tagline
Only Initials
const canvas=document.getElementById("canvas");
const ctx=canvas.getContext("2d");
let baseImg=null;
let wm=null;
let dragging=false;
let startX,startY;
let flipH=1, flipV=1;
let wmScale=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};
wmScale=1;
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
};
wmScale=1;
draw();
}
function applyLogo(){
if(!wm||wm.type!=="logo") alert("Logo upload karo");
}
function rotateWM(val){
if(wm){wm.angle=val;draw();}
}
function resizeWM(val){
wmScale=val;
draw();
}
function flipX(){flipH*=-1;draw()}
function flipY(){flipV*=-1;draw()}
template.addEventListener("change",()=>{
if(template.value==="signature"){
signatureStyle.style.display="inline-block";
}else{
signatureStyle.style.display="none";
}
});
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*wmScale, flipV*wmScale);
if(wm.type==="text"){
ctx.font="40px Arial";
ctx.fillStyle="#fff";
ctx.globalAlpha=1;
ctx.shadowBlur=0;
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="© "+wmText.value;
}
/* SIGNATURE STYLES */
if(wm.style==="signature"){
const s=signatureStyle.value;
if(s==="sig1"){
ctx.font="italic 42px cursive";
ctx.fillText(wm.text,0,40);
}
if(s==="sig2"){
ctx.font="bold 44px 'Comic Sans MS'";
ctx.fillText(wm.text,0,40);
}
if(s==="sig3"){
ctx.font="32px Arial";
ctx.fillText(wm.text,0,35);
}
if(s==="sig4"){
ctx.font="italic 40px cursive";
ctx.fillText(wm.text,0,40);
ctx.font="18px Arial";
ctx.fillText("your tagline",0,65);
}
if(s==="sig5"){
ctx.font="italic 38px cursive";
ctx.fillText(wm.text,0,40);
ctx.font="16px Arial";
ctx.fillText("your professional tagline goes here",0,70);
}
if(s==="sig6"){
ctx.font="bold 46px Arial";
ctx.fillText(
wm.text.split(" ").map(w=>w[0]).join(""),
0,40
);
}
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);
/* LOGO CROP FUNCTION (READY) */
function cropLogo(x,y,w,h){
if(!wm||wm.type!=="logo")return;
const t=document.createElement("canvas");
t.width=w; t.height=h;
const tc=t.getContext("2d");
tc.drawImage(wm.img,x,y,w,h,0,0,w,h);
const img=new Image();
img.onload=()=>{
wm.img=img;
wm.w=w; wm.h=h;
draw();
};
img.src=t.toDataURL();
}
