Apply a text watermark on images with HTML5 Canvas

Using the CANVAS object introduced by HTML5 we can do several operations on images. Today we see how to apply a text watermark.

I have already covered (in italian) the topic in the past, but I explained how to apply a watermark using a logo in PNG.

Now let’s see how to apply a text watermark.


The project starts as a custom application dedicated to the volunteers of the photographic section of the “International Journalism Festival” in Perugia and then I decided to make it available to the public.

The core of the tool is collected in the following snippet, in which the image is reduced to a maximum size of 1500×1125 pixels, and is applied a translucent watermark text in the lower right of the picture:

 

Comments