JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<script src="https://www.patrick-wied.at/static/watermarkjs/watermark.js"></script>

<div id="myDiv">
  <img class="watermark" src="https://cdn.shopify.com/s/files/1/0647/4927/3302/files/mgb3_1780x.jpg">
  <img src="https://cdn.shopify.com/s/files/1/0647/4927/3302/files/mgb3_1780x.jpg">
  <img src="https://cdn.shopify.com/s/files/1/0647/4927/3302/files/mgb3_1780x.jpg">
</div>

JavaScript

// get reference to div element
 // const myDiv = document.getElementById('myDiv');

  // select all image elements inside the div
  //const images = myDiv.querySelectorAll('img');

jQuery("#myDiv img").each(function(){
	jQuery(this).addClass("watermark");
  jQuery(this).html('<canvas id="img-holder"></canvas>');
	waterMX();
});



function waterMX(){
				wmark.init({
					/* config goes here */
					"position": "top-right", // default "bottom-right"
					"opacity": 80, // default 50
					"className": "watermark", // default "watermark"
					"watermark": "https://cdn.shopify.com/s/files/1/0647/4927/3302/files/shigeru_lash_and_brow_logo.png"
				});
			
		}