Crea marcas de agua con HTML Canvas y JavaScript. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet html 5

¡votar!

Crea marcas de agua con HTML Canvas y JavaScript

Watermark es una librería jquery que nos permite crear marcas de aguas para nuestras imágenes de forma muy sencilla, y que utiliza para ello el nuevo concepto de Canvas que incluye HTML.

El proceso es muy sencillo. A todas aquellas imágenes que tengan un classname que tu elijas, por defecto “watermark”, se le aplicará la marca de agua. Esta marca de agua no tiene por que ser una imagen .PNG o .GIF con transparencia, ya que la propia librería crea la transparencia, incluso si tu defines una imagen .JPG como imagen para la marca de agua. Lo bueno de todo, es que esta librería es de código abierto, por lo que puede ser utilizado en vuestros desarrollos.

Esta librería no modifica la imagen original, sino lo que hace es añadir la marca de agua, por lo que si alguien ve el código fuente y coge la ruta de la imagen, esta estará tal y como la hayamos incluido en el desarrollo.

El uso de la librería es muy sencillo. Sólo debemos de seguir una serie de pautas. En nuestro código, debemos de hacer la llamada al método wmark.init, que es donde se configurará todas las opciones para añadir nuestra marca de agua.

Las opciones que podemos configurar son:

className: Aquí indicamos el nombre de la clase de las imágenes que deben de incluir la marca de agua. Todas aquellas que contengan esta clase, se le aplicará la marca de agua. Por defecto es “watermark”
Position: Es donde se le indica donde irá la imagen de marca de agua. Por defecto tiene el valor “bottom-right”, pero puede tener uno de los siguientes valores: "top-left"|"top-right"|"bottom-right"|"bottom-left".
Watermark: Un elemento img que representa tu marca de agua.
Path: La ruta hacia la imagen que queramos que sea la marca de agua.
Opacity: Es un valor numérico, que representa el porcentaje de opacidad de la imagen.

El siguiente código es un ejemplo de como utilizar esta librería.



<html lang="en-us">
<head>
<title>watermark.js basic demo</title>
</head>
<body style="margin:0;padding:0;">
<div style="width:500px;position:relative;margin:auto;">
<h1>watermark.js basic demo</h1><a href="http://www.patrick-wied.at/static/watermarkjs/">Back to watermark.js</a>
The first and the third image will get a predefined watermark:
<img src="img/test1.jpg" width="500" height="200" class="watermark" />
<img src="img/test2.jpg" width="500" height="200" />
<img src="img/test3.jpg" width="500" height="200" class="watermark" />
</div>
<!-- Look at the configuration -->
<script src="../watermark.js"></script>
<script>
var load = false;
window.onload = function(){
if(!load) {
wmark.init({
/* config goes here */
"position": "top-right", // default "bottom-right"
"opacity": 50, // default 50
"className": "watermark", // default "watermark"
"path": "http://www.patrick-wied.at/static/watermarkjs/demos/img/watermark.png"
});
load = true;
}
}
</script>
</body>
</html>

Pueden ver el ejemplo en el siguiente enlace