18
MAI

Watermark.js - Générez des watermarks sur vos images côté front

Publié le 18/05/15 à 07h35 par DJo

Watermark.js est une bibliothèque Javascript ES6 permettant de générer des watermarks sur des images en Javascript.

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.

La bibliothèque est développée en ES6 et dispose d'un polyfill pour les navigateurs ne supportant pas encore la syntaxe grâce à Babel.js.

undefined

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:

var rotate = function(target) {
  var context = target.getContext('2d');
  var text = 'watermark.js';
  var metrics = context.measureText(text);
  var x = (target.width / 2) - (metrics.width + 24);
  var y = (target.height / 2) + 48 * 2;
  context.translate(x, y);
  context.globalAlpha = 0.5;
  context.fillStyle = '#fff';
  context.font = '48px Josefin Slab';
  context.rotate(-45 * Math.PI / 180);
  context.fillText(text, 0, 0);
  return target;
};
watermark(['img/bear.jpg'])
  .image(rotate)
  .then(function (img) {
    document.getElementById('rotate').appendChild(img);
  });

 

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web