Watermark.js è una libreria JavaScript che aggiunge un watermark (letteralmente filigrana, ovvero un logo o un marchio) alle immagini presenti sulle pagine web. Contrassegnare le immagini in modo permanente è utile a proteggerle dalla copia oppure, al contrario, ad approfittare della loro riproduzione per diffondere un marchio (brand awareness). Usare watermark.js è semplice, vediamo quanto.

Come usare watermark.js

La libreria innesta il marchio nelle immagini marcate con la classe CSS “watermark”. Se il nome della classe non piace è possibile cambiarlo. Se il nostro watermark è in formato JPG la libreria aggiunge per noi un livello di trasparenza, altrimenti possiamo fornirle i più idonei formati PNG e GIF.

Prima di tutto inseriamo il riferimento allo script. E’ consigliabile inserirlo in fondo alla pagina, subito prima della chiusura del tag

body

Al caricamento della pagina chiamamo il metodo wmark.init

La variabile load agisce come un flag e serve a evitare che il codice venga eseguito ad ogni postback. Infine aggiorniamo i tag HTML delle immagini a cui vogliamo aggiungere il nostro watermark

E questo è tutto.

Sul sito ufficiale sono disponibili un paio di demo funzionanti. La seconda mostra un uso senz’altro originale della libreria: l’inserimento di Codici QR nelle immagini. Trattandosi di un progetto open source è possibile scaricare anche il codice sorgente di watermark.js.

Non tutto è oro quel che luccica

Essendo implementata lato client, la protezione delle immagini non è certo garantita al cento per cento. Dobbiamo decidere cosa è più importante, l’inviolabilità delle nostre immagini o la comodità di non doverle ritoccare prima di inviarle al server. Altro fattore da non trascurare è il calo di prestazioni. Il codice JavaScript deve caricare il watermark e inserirlo nell’immagine originale. Il tempo di caricamento potrebbe risentirne, soprattutto nel caso di pagine ricche di immagini.

Watermark.js è un progetto interessante e ingegnoso che va usato tenendo ben presente i suoi pregi e tutte le possibili controindicazioni.