Watermark.js est une bibliothèque Javascript ES6 permettant de générer des watermarks sur des images en Javascript.
Pour de multiples raisons, il peut être nécessaire de vouloir générer des watermarks côté front, sans avoir à utiliser un outil dédié côté serveur.
Watermark.js propose de watermarker facilement vos images:
- A l’aide d’un logo / image en ligne
- En uploadant une image avec positionnement live
- A l’aide de texte
Vous pourrez facilement positionner le watermark à l’endroit souhaité sur l’image ou de manière arbitraire.
Pour créer un watermark sous forme de texte avec une webfont spécifique, une opacité réduite et une légère rotation, voici le code à mettre en place :
01.var rotate = function(target) {
02.var context = target.getContext('2d');
03.var text = 'watermark.js';
04.var metrics = context.measureText(text);
05.var x = (target.width / 2) - (metrics.width + 24);
06.var y = (target.height / 2) + 48 * 2;
07.context.translate(x, y);
08.context.globalAlpha = 0.5;
09.context.fillStyle = '#fff';
10.context.font = '48px Josefin Slab';
11.context.rotate(-45 * Math.PI / 180);
12.context.fillText(text, 0, 0);
13.return target;
14.};
15.watermark(['img/bear.jpg'])
16..image(rotate)
17..then(function (img) {
18.document.getElementById('rotate').appendChild(img);
19.});