Now let’s use this
watermarkImage() function on an image found under the same domain:
By using the code below we end up getting the watermarked image above on the right showing the neighborhood of Ensanche Espaillat (Santiago de los Caballeros, Dominican Republic):
var elemImg = document.getElementById('imgToWatermark');
watermarkImage(elemImg, 'Ensanche Espaillat');
Of course, this simple function is not a fully featured solution for adding watermarks to our images. For example the following cases may occur:
- We just want to create a watermarked image from an image URL.
- We want to change the background color of the watermark.
- We want to use a logo image as the watermark.
- etc., etc.
watermarkImage() function works the watermark will be added to the image, but if not the image will not be changed. This is done on purpose to avoid strange behaviour on failure. There are two main reasons why this would fail:
- The browser running the code doesn’t support adding images and/or SVGs to a
There is actually a great solution out there called watermark.js which will probably provide all of the options that you need to watermark your images.
Of course, if you would like to write your own code, my gist at the beginning of this post should be a pretty good start. Have fun and happy coding! 😎