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 1500x1125 pixels, and is applied a translucent watermark text in the lower right of the picture:

 

[embed]https://gist.github.com/anonymous/b575f30a280ae9a52c090a3144d1f025[/embed]