NV Ingenieria, la ilusion en los proyectos, el mayor de los placeres

Marca de agua dinámica para Web



Una pequeña introducción


A continuación os ofrecemos una solución sencilla para estampar una marca de agua en las imagenes que queráis proteger de una página web.

 

La ventaja de este método es que la marca de agua se imprime dinámicamente por lo que no hay que modificar las imágenes que se suben al servidor. De esta forma ahorramos bastante trabajo, ya que si utilizásemos un método estático (que modifica la fotografía) deberíamos mantener dos conjuntos de imágenes, unas sin marca de agua y otras con ella.

 

Nosotros lo hemos utilizado reciente en un proyecto de venta de fotografías a través de internet, donde no se permite la descarga de las mismas, sino únicamente visualizarlas (protegidas con la marca de agua) y realizar un pedido on-line para que la correspondiente tienda nos envíe las copias impresas.

 

Requisitos

 

En primer lugar debemos tener en cuenta una serie de requisitos para este método:

  • El servidor web debe ser apache, ya que hacemos uno de los ficheros de configuración .htaccess.
  • El servidor debe permitir el uso de PHP, ya que la marca de agua se imprime mediante un programa en este lenguaje.

 

Para empezar deberemos crear la marca de agua en un fichero de imagen separado.

 

Creación de la marca de agua

 

Para el ejemplo hemos elegido el formato PNG, ya que permitirá que la marca de agua sea parcialmente transparente, con lo que se verá lo que hay debajo de la misma al imprimirla sobre la imagen original. Otros formatos (o un PNG sin transparencia también servirán).

 

La resolución del fichero de imagen con la marca de agua deberá ser de una resolución adecuada al tamaño de las fotos que queramos proteger. En nuestro caso, las imagenes que queremos proteger tienen una resolución de 640×480 y de 320×240, por lo que hemos creado una imágen de marca de agua con esta última resolución. Con el código propuesto, la marca de agua quedará centrada en archivos de mayor tamaño.

 

A continuación os mostramos nuestra marca de agua:

Y en la imagen siguiente el resultado sobre una fotografía:

 

Imagen con marca de agua incorporada

 

Fichero .htaccess

 

En primer lugar deberemos crear en el servidor web una nueva carpeta para las imágenes que queramos proteger.

 

A continuación crearemos un fichero .htaccess en la carpeta creada y añadiremos las siguientes líneas:

 

RewriteEngine on

RewriteRule ^(.*)\.jpg ./image.php?image=%{REQUEST_FILENAME}

RewriteRule ^(.*)\.JPG ./image.php?image=%{REQUEST_FILENAME}

 

Lo que consigue el fragmento anterior es que los ficheros jpg que sean accedidos por cualquier motivo (al visualizar páginas o como archivos sueltos), sean procesados antes de servirse por medio medio del algoritmo contenido en el fichero image.php. De esto se encarga el servidor web (apache), gracias a las reglas escritas en el fichero htaccess.

 

Algoritmo de superposición

 

En la misma carpeta deberemos crear el fichero image.php que contendrá el algoritmo de procesamiento de imágenes que añade la marca de agua. El contenido del fichero será el siguiente:

 

<?php

  //

  // Generador de marca de agua

  // Autor: Daniel Navarro (NV Ingenieria)

  //

  header("Content-type: image/jpeg");

  // Obtenemos la imágen pasada como parámetro y la marca de agua

  $image = $_GET['image'];

  // Leemos el fichero de la marca de agua

  $watermark = "watermark.png";

  $im = imagecreatefrompng($watermark);

  // Vemos la extensión de la imágen, para elegir el tipo de procesamiento

  $ext = substr($image, -3);

  // Leemos el fichero de imagen según la extensión

  if(strtolower($ext) == "gif") {

    if (!$im2 = imagecreatefromgif($image)) {

      echo "Error opening $image!";

      exit;

    }

  }

  else if(strtolower($ext) == "jpg") {

    if (!$im2 = imagecreatefromjpeg($image)) {

      echo "Error opening $image!";

      exit;

    }

  }

  else if(strtolower($ext) == "png") {

    if (!$im2 = imagecreatefrompng($image)) {

      echo "Error opening $image!";

      exit;

    }

  }

  else {

    die;

  }

  // Copiamos la imágen de la marca de agua sobre la original

  imagecopy($im2, $im, (imagesx($im2)/2)-(imagesx($im)/2),

            (imagesy($im2)/2)-(imagesy($im)/2), 0, 0,imagesx($im), imagesy($im));

  if($_GET[repeat]) {

    $waterless = imagesx($im2) - imagesx($im);

    $rest = ceil($waterless/imagesx($im)/2);

    for($n=1; $n<=$rest; $n++) {

      imagecopy($im2, $im, ((imagesx($im2)/2)-(imagesx($im)/2))-(imagesx($im)*$n),

                (imagesy($im2)/2)-(imagesy($im)/2), 0, 0, imagesx($im), imagesy($im));

      imagecopy($im2, $im, ((imagesx($im2)/2)-(imagesx($im)/2))+(imagesx($im)*$n),

                (imagesy($im2)/2)-(imagesy($im)/2), 0, 0, imagesx($im), imagesy($im));

    }

  }

  // Retornamos la imagen y eliminamos las intermedias

  header("Content-Type: image/jpeg");

  imagejpeg($im2);

  imagedestroy($im);

  imagedestroy($im2);

?>

 

Por ultimo, también a esta carpeta, deberemos subir la imágen PNG que creamos anteriormente con la marca de agua que queramos sobreimpresionar en las imágenes. Así pues, en la carpeta deberemos tener tres archivos además de las imágenes que queramos proteger:

  • .htaccess
  • watermark.png
  • image.php

 

A partir de este momento todas las imágenes que se encuentren en esa carpeta y que se visualicen por medio de la página web, serán mostradas con la marca de agua correspondiente, quedando así protegidas contra copias no autorizadas.


Términos relacionados: Web