Javascript Code Simplest Function Watermark Image with Text

Javascript Code Simplest Function to Watermark Image with Text Using Pure Vanilla Javascript

function watermarkImageWText(srcImage, watermarkDetails) { const canvas = document.createElement("canvas"), context = canvas.getContext("2d"); canvas.width = srcImage.width; canvas.height = srcImage.height; context.drawImage(srcImage, 0, 0, srcImage.width, srcImage.height); context.fillStyle = watermarkDetails.color; context.textBaseline = "middle"; context.font = watermarkDetails.font; context.globalAlpha = watermarkDetails.alpha; context.fillText(watermarkDetails.text, watermarkDetails.xpos, watermarkDetails.ypos); return canvas.toDataURL(); }

Example of how to use this text watermark function to add text watermark to image:

const mfile = document.querySelector("#myFile"); const timage = document.querySelector("#targetimg"); mfile.addEventListener("change", async (e) => { let img = document.createElement("img"), base64 = URL.createObjectURL(mfile.files[0]); img.setAttribute("src", base64); // this is where you enter your text watermark details const watermarkDetails = { color: "white", // watermark text color font: "bold 30px Arial, sans-serif", // watermark font text: "vb6code.com", // the text of the watermark alpha: 0.4, // 0.1 (most transparent) - 1.0 (least transparent) xpos: 30, // x/left position of watermark in pixels ypos: 30, // y/top position of watermark in pixels }; // wait for the original image to load img.onload =()=> { let watermarkedImg = watermarkImageWText(img, watermarkDetails); timage.setAttribute("src", watermarkedImg); } }); //=>mfile.addEventListener

Try Text Watermark Javascript Code

Related: create watermark using image as watermark