Ultimate Watermark Tool
body{margin:0;font-family:Arial;background:#f5f7fb}
.wrapper{max-width:1200px;margin:auto;padding:20px}
h1{color:#0b5cff}
.card{
background:#fff;
border-radius:20px;
padding:20px;
box-shadow:0 30px 70px rgba(0,0,0,.15);
}
.controls{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:15px
}
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%;
border-radius:15px;
background:#eaeaea;
touch-action:none;
}
.crop-box{
position:absolute;
border:2px dashed #0b5cff;
pointer-events:none;
}
.relative{position:relative}
Advanced Image Watermark Tool
Simple
Bold
Shadow
Transparent
Signature + Tagline
Tiled
const canvas=document.getElementById("canvas");
const ctx=canvas.getContext("2d");
const cropBox=document.getElementById("cropBox");
let baseImg=null;
let textWM=null;
let logoWM=null;
let active=null;
let dragging=false,offX=0,offY=0;
let cropping=false,startCX=0,startCY=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]);
};
logoUpload.onchange=e=>{
const img=new Image();
img.onload=()=>{
logoWM={
img,x:100,y:100,w:img.width/3,h:img.height/3,
scale:1,angle:0
};
draw();
};
img.src=URL.createObjectURL(e.target.files[0]);
};
function addText(){
textWM={
text:wmText.value||"Brand",
style:textStyle.value,
x:150,y:150,
scale:1,angle:0
};
draw();
}
function addLogo(){
if(!logoWM) alert("Upload logo first");
}
function draw(){
if(!baseImg)return;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(baseImg,0,0);
if(textWM) drawText();
if(logoWM) drawLogo();
}
function drawText(){
ctx.save();
ctx.translate(textWM.x,textWM.y);
ctx.rotate(textWM.angle*Math.PI/180);
ctx.scale(textWM.scale,textWM.scale);
ctx.font="40px Arial";
ctx.fillStyle="#fff";
ctx.shadowBlur=0;
ctx.globalAlpha=1;
if(textWM.style==="bold") ctx.font="900 44px Arial";
if(textWM.style==="shadow"){ctx.shadowColor="#000";ctx.shadowBlur=6;}
if(textWM.style==="transparent") ctx.globalAlpha=.3;
if(textWM.style==="signature"){
ctx.font="italic 42px cursive";
ctx.fillText(textWM.text,0,40);
ctx.font="16px Arial";
ctx.fillText("your tagline",0,65);
ctx.restore(); return;
}
if(textWM.style==="tile"){
for(let y=0;y<canvas.height;y+=120)
for(let x=0;x{
const x=e.offsetX,y=e.offsetY;
if(textWM && hit(textWM,x,y,200,60)){active=textWM}
else if(logoWM && hit(logoWM,x,y,logoWM.w*logoWM.scale,logoWM.h*logoWM.scale)){active=logoWM}
else active=null;
if(active){
dragging=true;
offX=x-active.x;
offY=y-active.y;
}
if(cropping){
startCX=x; startCY=y;
cropBox.style.display="block";
}
});
canvas.addEventListener("pointermove",e=>{
if(dragging && active){
active.x=e.offsetX-offX;
active.y=e.offsetY-offY;
draw();
}
if(cropping){
const x=Math.min(startCX,e.offsetX);
const y=Math.min(startCY,e.offsetY);
const w=Math.abs(e.offsetX-startCX);
const h=Math.abs(e.offsetY-startCY);
Object.assign(cropBox.style,{
left:x+"px",top:y+"px",width:w+"px",height:h+"px"
});
}
});
canvas.addEventListener("pointerup",e=>{
dragging=false;
if(cropping){
applyCrop();
}
});
function hit(o,x,y,w,h){
return x>o.x && xo.y && y{
baseImg=img;
canvas.width=w;
canvas.height=h;
draw();
};
img.src=t.toDataURL();
}
function downloadImage(){
const a=document.createElement("a");
a.download="watermarked-image.png";
a.href=canvas.toDataURL("image/png");
a.click();
}
