Javascript Code Simplest Function Watermark Image with Watermark Image

Javascript Code Simplest Function to Watermark Image Using an Image as the Watermark, with Transparency Options for the Watermark Image, Using Pure Vanilla Javascript

async function watermakImage(srcImage, watermarkDetails) { const canvas = document.createElement("canvas"), context = canvas.getContext("2d"), result = await fetch(watermarkDetails.imgPath), blob = await result.blob(), image = await createImageBitmap(blob); pattern = context.createPattern(image, "no-repeat"); canvas.width = srcImage.width, canvas.height = srcImage.height; // put [srcImg] on the canvas context.drawImage(srcImage, 0, 0, srcImage.width, srcImage.height); context.translate(watermarkDetails.xpos, watermarkDetails.ypos); // watermark position (20px left, 20px top) context.rect(0, 0, srcImage.width, srcImage.height); context.fillStyle = pattern; context.globalAlpha = watermarkDetails.alpha; context.fill(); return canvas.toDataURL(); }

Example of how to use this image watermark function to add image 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 = { imgPath: "https://vb6code.com/images/js.png", alpha: 0.4, // watermark transparency, 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 }; img.addEventListener("load", async () => { timage.src = await watermakImage(img, watermarkDetails); }); });

Related: create watermark using text