Advanced Watermark Adder
body{
margin:0;
font-family:Segoe UI,Arial;
background:#f6f1e7;
color:#1f2937
}
.wrapper{max-width:1200px;margin:auto;padding:20px}
.card{
background:#fffaf0;
border-radius:22px;
padding:20px;
box-shadow:0 25px 60px rgba(0,0,0,.15)
}
h1{text-align:center}
.controls{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center
}
input,select,button{
padding:10px 14px;
border-radius:10px;
border:1px solid #d1d5db;
background:#fff
}
button{
background:linear-gradient(135deg,#2563eb,#1e40af);
color:#fff;
cursor:pointer
}
.slider{width:130px}
canvas{
width:100%;
margin-top:20px;
background:#fdfdfd;
border-radius:18px;
touch-action:none
}
Advanced Watermark Adder Tool
Simple
Bold
Shadow
Transparent
Inverted Stroke
Signature + Tagline
© Copyright
Tiled
const canvas=document.getElementById("canvas");
const ctx=canvas.getContext("2d");
let baseImg=null;
let objects=[];
let active=null;
let dragging=false,dx=0,dy=0;
const DELETE=22;
/* ---------- IMAGE LOAD ---------- */
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=()=>{
objects.push({
type:"logo",img,
x:120,y:120,
w:img.width/3,h:img.height/3,
scale:1,angle:0,flip:1
});
draw();
};
img.src=URL.createObjectURL(e.target.files[0]);
};
/* ---------- ADD TEXT ---------- */
function addText(){
objects.push({
type:"text",
text:wmText.value||"Brand",
color:textColor.value,
style:textStyle.value,
x:150,y:150,
scale:1,angle:0,flip:1
});
draw();
}
/* ---------- DRAW ---------- */
function draw(){
if(!baseImg)return;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(baseImg,0,0);
objects.forEach(o=>drawObject(o));
if(active) drawBox(active);
}
function drawObject(o){
ctx.save();
ctx.translate(o.x,o.y);
ctx.rotate(o.angle*Math.PI/180);
ctx.scale(o.scale*o.flip,o.scale);
if(o.type==="logo"){
ctx.drawImage(o.img,0,0,o.w,o.h);
}
if(o.type==="text"){
ctx.font="40px Arial";
ctx.fillStyle=o.color;
ctx.globalAlpha=1;
if(o.style==="bold")ctx.font="bold 44px Arial";
if(o.style==="shadow"){ctx.shadowColor="#000";ctx.shadowBlur=6}
if(o.style==="transparent")ctx.globalAlpha=.3;
if(o.style==="invert"){ctx.strokeText(o.text,0,40)}
if(o.style==="signature"){
ctx.font="italic 42px cursive";
ctx.fillText(o.text,0,40);
ctx.font="16px Arial";
ctx.fillText("your tagline",0,65);
ctx.restore();return;
}
if(o.style==="copyright"){
ctx.fillText("© "+o.text,0,40);
ctx.restore();return;
}
if(o.style==="tile"){
ctx.restore();
for(let y=0;y<canvas.height;y+=120)
for(let x=0;x{
const x=e.offsetX,y=e.offsetY;
active=null;
for(let i=objects.length-1;i>=0;i--){
const o=objects[i];
const w=o.type==="logo"?o.w*o.scale:220;
const h=o.type==="logo"?o.h*o.scale:70;
if(x>o.x+w-DELETE&&xo.y&&yo.x&&xo.y&&y{
if(dragging&&active){
active.x=e.offsetX-dx;
active.y=e.offsetY-dy;
draw();
}
});
canvas.addEventListener("pointerup",()=>dragging=false);
/* ---------- CONTROLS ---------- */
function resizeActive(v){if(active){active.scale=v;draw()}}
function rotateActive(v){if(active){active.angle=v;draw()}}
function flipActive(){if(active){active.flip*=-1;draw()}}
function downloadImg(){
const a=document.createElement("a");
a.download="watermarked.png";
a.href=canvas.toDataURL("image/png");
a.click();
}
