Tutoriales de Desarrollo y Diseño Web | Web.Ontuts

Imaginando una biblioteca de imágenes… ¡Demasiado trabajo!

Imaginemos que tenemos un biblioteca de imágenes y que queremos añadirles una marca de agua a todas ellas. Podemos abrir un editor de imágenes (Gimp o Photoshop, por ejemplo) y crear nuestra marca de agua manualmente a todas ellas.

Es un trabajo sencillo pero si nuestra biblioteca de imágenes es muy grande el trabajo se convierte en algo más duro. Podemos automatizar esta tarea, pero si las marcas de agua que queremos poner son dinámicas, tenemos que buscar otra solución. Como ejemplo imaginemos que lo que queremos poner es la fecha/hora en la que el usuario solicita la imagen al servidor. Para hacer esto vamos a usar la librería GD y PHP. Empecemos:

Gracias a la librería GD podemos añadir de manera sencilla marcas de agua a nuestras imágenes. Esto Unido a mod_rewrite nos permite hacer el trabajo al vuelo.

¡Automaticemos el trabajo!

La idea es simple. En lugar de abrir directamente la imagen, lo que vamos a hacer es crear un script PHP que modifique la imagen original con la función imagecreatefromjpeg y le añada un footer con la fecha/hora . Después le entregaremos al navegador la imagen modificada con las cabeceras necesarias.

Esta solución nos implica modificar todas nuestras etiquetas img y pasar de algo así:

<img src='/ruta/de/la/imagen.jpg' alt='img' />

A algo así:

<img src='/ruta/del/script.php' alt='img' />

Para evitar esto vamos a usar un pequeño truco que consiste en usar el módulo mod_rewrite de apache (los demás servidores Web tienen módulos similares). Creando este simple archivo .htaccess en la carpeta donde tengamos nuestras imágenes jpg, podemos redirigir cada petición de la imagen original a nuestro script PHP que la modifica y le añade la marca de agua.

RewriteEngine on
RewriteRule !\.(php)$ watermark.php

Ahora creamos nuestro script watermark.php para hacer la modificación.

<?php
$uri = $_SERVER['REQUEST_URI'];
$documentRoot = $_SERVER['DOCUMENT_ROOT'];
$filename = $documentRoot . $uri;
if (realpath(__FILE__) == realpath($filename)) {
    exit();
}
$stringSize = 3;
$footerSize = ($stringSize==1) ? 12 : 15;
$footer = date('d/m/Y H:i:s');

list($width, $height, $image_type) = getimagesize($filename);
$im = imagecreatefromjpeg($filename);
imagefilledrectangle (
        $im,
        0,
        $height,
        $width,
        $height - $footerSize, imagecolorallocate($im, 49, 49, 156));

imagestring($im,
        $stringSize,
        $width-(imagefontwidth($stringSize)*strlen($footer)) - 2,
        $height-$footerSize,
        $footer,
        imagecolorallocate($im, 255, 255, 255));

header( 'Content-Type: image/jpeg' );
imagejpeg($im);

Como vemos el script es muy sencillo. Podemos modificarlo y cambiarlo por nuestro logotipo, o introducir nuevos valores. Para que esto funcione tenemos que tener nuestra instalación de PHP compilada con soporte GD.

Imagen Original:

Imagen transformada:

Una pequeña reflexión final

Y eso es todo. ¿Qué pega tiene esta técnica? Pues que estamos usando unos recursos del servidor elevados. Estamos transformando la imagen cada vez que la solicitamos. Si el volumen de peticiones es pequeño no hay problema, pero si crece podemos tirar el servidor.

Una solución sencilla es cachear la imagen resultante. De este modo liberamos al servidor, pero ¿que pasa si la marca de agua es dinámica?. En el siguiente artículo de esta mini serie veremos una posible solución al problema.

¡Nos vemos en el próximo capítulo!