watermark

by Craig Martin

HTML

<button type="button" onclick='imgCanvasWatermark("#content img")'>Replace Images with canvas/watermark</button>
<br><br>Run on load with:
<pre>
imgCanvasWatermark("#content img");
</pre>
<br><br>
<div id="content">
<img  width=300 src="https://cdn.shopify.com/s/files/1/0647/4927/3302/files/mgb3_1780x.jpg">
<img  width=400 src="https://cdn.shopify.com/s/files/1/0647/4927/3302/files/mgb3_1780x.jpg">
<img width=350 src="https://cdn.shopify.com/s/files/1/0647/4927/3302/files/b4afc2.jpg">

<img width=500 src="https://cdn.shopify.com/s/files/1/0647/4927/3302/files/mgb3_1780x.jpg">
<img width=600 src="https://cdn.shopify.com/s/files/1/0647/4927/3302/files/b4afc2.jpg">

</div>

JavaScript

function imgCanvasWatermark(targ){
imgCNT = 0;
jQuery(targ).each(function(){
imgCNT++;
var imgsrc = jQuery(this).attr("src");
var imgheight = jQuery(this).height();
var imgwidth = jQuery(this).width();
var wmright = imgwidth-(imgwidth/3.5);
var wmleft = 10;
var wmdown = imgheight-(imgheight/5);

jQuery(this).before('<canvas id="img-'+imgCNT+'-holder" width='+imgwidth+' height='+imgheight+'></canvas>');

let canvas = document.querySelector('#img-'+imgCNT+'-holder').getContext('2d'), 
img;

img = document.createElement('img');
img.src = imgsrc;
img.setAttribute('width', imgwidth);
img.setAttribute('height', imgheight);  
   
watermark = document.createElement('img');
//watermark.src = 'https://peterfodormd.com/wp-content/themes/twentyseventeen/images/footer-logo.png';
watermark.src = 'https://cdn.shopify.com/s/files/1/0647/4927/3302/files/shigeru_lash_and_brow_logo.png';
canvas.imageSmoothingEnabled = false;    
canvas.drawImage(img, 0, 0, img.width=imgwidth, img.height=imgheight);
jQuery(this).remove();

    
if(imgwidth <= 300){   
canvas.imageSmoothingEnabled = false;    
canvas.drawImage(watermark, wmleft, 5, watermark.width/7, watermark.height/7);
} else 
if(imgwidth <= 400 && imgwidth > 300){   
canvas.imageSmoothingEnabled = false;    
canvas.drawImage(watermark, wmleft, 8, watermark.width/6, watermark.height/6);
} else 
if(imgwidth <= 500 && imgwidth > 400){   
canvas.imageSmoothingEnabled = false;    
canvas.drawImage(watermark, wmleft, 10, watermark.width/6, watermark.height/6);
} else  
if(imgwidth <= 600 && imgwidth > 500){   
canvas.imageSmoothingEnabled = false;    
//canvas.drawImage(watermark,  wmleft, wmdown, watermark.width/5, watermark.height/5);
canvas.drawImage(watermark,  wmright, wmdown, watermark.width/5, watermark.height/5);
} else {   
canvas.imageSmoothingEnabled = false;    
canvas.drawImage(watermark, 10, 5, watermark.width=185, watermark.height=45);
}    

});
}

//imgCanvasWatermark("#content img");