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:

 

https://gist.github.com/anonymous/b575f30a280ae9a52c090a3144d1f025

Related posts

  1. Ten command line tools for manipulate JSON arrays
  2. What is Canvas Fingerprinting and how the companies use it to track you online
  3. Turn static HTML into a web application with MAVO
  4. Geolocating with a single javascript line