En este tutorial aprenderemos a crear marcas de agua en nuestras imágenes utilizando PHP y mod_rewrite. Como siempre paso a paso, bien explicado y con imágenes del resultado final. ¡No os lo perdáis!

Autor:

Desarrollador y arquitecto Web con más de 10 años de experiencia, especializado en tecnologías Open Source. Experiencia con desarrollos Web en entornos industriales. Puedes leerle en su blog gonzalo123.wordpress.com y también seguirle en Twitter @gonzalo123.

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!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (8 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Buen Tutorial, lo practicare esta semana! Gracias

Genial!

Que tal un tutorial de crear archivos PDF en php, hay una librería gratis para eso.

Gracias por los tutoriales de alta calidad como estos…!

Bienvenido Sáez

En cada tuto vuestro aprendo más y más, MUCHAS GRACIAS

canzion23

Buenísimo… estas tareas pueden ser tediosas aunque sea con un copy/paste… gracias por el tuto… lo aplicaremos muy pronto..

y como se agrega el efecto

aki no le estoy definiendo la ruta de alguna imagen
lo toma por default?

La ruta de las imágenes las tomo del uri de la petición.:

$uri = $_SERVER['REQUEST_URI'];
$documentRoot = $_SERVER['DOCUMENT_ROOT'];
$filename = $documentRoot . $uri;

De esta forma me me evito tener que mapear en el servidor de nuevo la ruta de las imágenes.

rafael

El capítulo II, por favor!!!
marcas de agua dinámicas!

Muchas gracias por estos tutoriales

y FELIZ AÑO NUEVO!

Que excelente tutorial, en muchos sitios se han olvidado un poco de PHP se prefieren otros lenguajes para hacer esto, por eso me parece muy útil este tutorial ya que es para PHP, pasare mas de seguido por aquí, gracias y saludos.