HTML vízjel készítése?

JavaScript canvasra teszed a képet, rá pedig a vízjelet.

De ez sem 100%-os megoldás, mert a kép forrását meg lehet nézni, és így elérhető az eredeti kép.

Demo:

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

var cw=canvas.width;

var ch=canvas.height;

var img=new Image();

img.crossOrigin='anonymous';

img.onload=start;

img.src=" [link]

function start(){

canvas.width=img.width;

canvas.height=img.height;

ctx.drawImage(img,0,0);

var dataURL=watermarkedDataURL(canvas,"It's Mine!");

}

function watermarkedDataURL(canvas,text){

var tempCanvas=document.createElement('canvas');

var tempCtx=tempCanvas.getContext('2d');

var cw,ch;

cw=tempCanvas.width=canvas.width;

ch=tempCanvas.height=canvas.height;

tempCtx.drawImage(canvas,0,0);

tempCtx.font="24px verdana";

var textWidth=tempCtx.measureText(text).width;

tempCtx.globalAlpha=.50;

tempCtx.fillStyle='white'

tempCtx.fillText(text,cw-textWidth-10,ch-20);

tempCtx.fillStyle='black'

tempCtx.fillText(text,cw-textWidth-10+2,ch-20+2);

// just testing by adding tempCanvas to document

document.body.appendChild(tempCanvas);

return(tempCanvas.toDataURL());

}

body{ background-color: ivory; padding:20px;}

canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

<h2>Watermarked...</h2>

HTML vízjel készítése?

Ugye csak viccelsz ?

Erre a megoldas a php. Vagy egy tucat tutorial / sablon letezik csak utana kellene nezni.

Css, Js kliensoldalon van. Nem értem, mi értelme lenne vízjel (ha csak nem dísznek használod), mert azt valaki átírja benne, vagy kikapcsolja a javascriptet és már le is szedte.

PHP-ben kivitelezhető.