Generar gráficos utilizando la librería GD

En las p�ginas web, a menudo se encuentran miniaturas de im�genes, por lo general representan enlaces a la imagen an�loga en alta resoluci�n. La aplicaci�n de las miniaturas como im�genes que dan una vista preliminar tiene muchas ventajas. Es un elemento indispensable en el caso de un directorio de imagenes o galer�as de fotograf�as. Buscar una imagen espec�fica es m�s sencillo que revisar consecutivamente todas las fotograf�as en su resoluci�n m�xima, especialmente para los usuarios de Internet que utilizan conexi�n de bajo ancho de banda. En caso de p�ginas que presentan informaci�n, este m�todo permite introducir miniaturas est�ticamente en el contenido del servicio, porque tal vez los lectores no esten interesados en las fotograf�as.

La preparaci�n de gr�ficos en tama�os alternativos, con ayuda de programas gr�ficos puede ser muy laborioso, con el uso de la librer�a GD podemos hacerlo autom�ticamente. Desde luego, las fotograf�as pueden tener diferentes proporciones y tama�os.

Nuestro ejemplo esta compuesto de miniaturas de imagenes de tama�os definidos, manteniendo la proporci�n de las imagenes originales. Tomando los siguientes principios:

• la escala de la imagen est� definida de tal forma que sea toda visible (no puede ser recortada),
• si la imagen original es menor que el tama�o seleccionado que las miniaturas, en tal caso la imagen no se somete a la conversi�n de escala (aumentada).

<?php
if($_GET['width'] > 0) {
    $width = $_GET['width'];
} else
{
    $width = 200;
}
if($_GET['height'] > 0) {
    $height = $_GET['height'];
} else
{
    $height = 200;
}
if($_GET['filename']) {
    $filename = $_GET['filename'];
} else
{
    $filename = 'civic.jpg';
}

//imagen desde el archivo jpg
$src_image = imagecreatefromjpeg($filename);

$image = imagecreate($width, $height);

//asignamos los colores que ocuparemos m�s adelante
$bg = imagecolorallocate($image, 200, 200, 200);
$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);

$margin_x = 10;
$margin_y = 10;

$w = $width-2*$margin_x;
$h = $height-2*$margin_y;

$src_w = imagesx($src_image);
$src_h = imagesy($src_image);

//�desplegamos la imagen en la dimensi�n original?
if(($w > $src_w) && ($h > $src_h)) {
    $dst_w = $src_w;
    $dst_h = $src_h;
} else
//�o escalamos la imagen de acuerdo a la dimensi�n horizontal?
if(($w/$h) < ($src_w/$src_h)) {
    $dst_w = $w;
    $dst_h = $w*$src_h/$src_w;
} else
//�o la escalamos de acuerdo a la dimensi�n vertical?
{
    $dst_w = $h*$src_w/$src_h;
    $dst_h = $h;
}

imagecopyresized($image, $src_image, ($width-$dst_w)/2, ($height-$dst_h)/2,
  0, 0, $dst_w, $dst_h, $src_w, $src_h);

//colocamos el texto sobre la imagen
imagestring($image, 0, $margin_x, ($height-$margin_y), $filename, $white);

//encabezado correspondiente para los datos de salida
header("Content-type: image/jpeg");

//generamos la imagen
imagejpeg($image);

//liberamos la memoria
imagedestroy($image);
?>

Las funciones imagesx(), imagesy() permiten reconocer la dimensi�n de la imagen. Luego creamos una imagen nueva cuyas dimensiones corresponder�n al gr�fico resultante. De acuerdo con la dimensi�n de la imagen original decidimos si se le aplicar� una escala a la imagen, en este caso, se decide de acuerdo con tal dimensi�n. En el caso de que su ancho y su altura sean menores que el tama�o del campo en el que la imagen ser� colocada, no escalamos la imagen. En caso contrario, realizando el aumento se crear�a un efecto desagradable de pixels enormes. Si estamos hablando de nuestra galer�a de fotograf�as, podemos utilizar nuestros conocimientos no s�lo para crear las vistas preliminares sino tambi�n para simples modificaciones de las im�genes. Podemos crear un patr�n seg�n el cual todas las im�genes en nuestro servicio tendr�n un marco caracter�stico o las marcaremos con nuestro logo. Eso ya puede hacerlo el lector como experimento.

El efecto que podemos apreciar en la Figura 2 es el resultado del funcionamiento de los scripts thumb.php y catalog.php. El script catalog.php. (v�ase el Listado 5) genera c�digo HTML con una forma para seleccionar el tama�o de las miniaturas adem�s de las vistas preliminares.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE> Images </TITLE></HEAD>
<BODY>
<?php
    //definimos el nombre del script que genera las imagenes
    $image = 'thumb.php';

    //definimos el ancho de las imagenes con base en el par�metro width
    if($_GET['width'] > 0) {
        $width = $_GET['width'];
    } else
    {
        $width = 200;
    }
    //definimos la altura de las imagenes con base en el par�metro height
    if($_GET['height'] > 0) {
        $height = $_GET['height'];
    } else
    {
        $height = 200;
    }

    //generamos el formulario para la selecci�n del tama�o de las vistas preliminares
    echo '<FORM ACTION="'.$_SERVER['SCRIPT_NAME'].'" METHOD="GET">';
    echo '<SELECT NAME="width">';
    echo '<OPTION VALUE="">-- width --</OPTION>';
    for($i=100; $i<700; $i+=100) {
        echo '<OPTION VALUE="'.$i.'"';
        if($i == $width) {
            echo ' SELECTED';
        }
        echo '>'.$i.'</OPTION>';
    }
    echo '</SELECT>';
    echo '<SELECT NAME="height">';
    echo '<OPTION VALUE="">-- height --</OPTION>';
    for($i=100; $i<700; $i+=100) {
        echo '<OPTION VALUE="'.$i.'"';
        if($i == $height) {
            echo ' SELECTED';
        }
        echo '>'.$i.'</OPTION>';
    }
    echo '</SELECT>';
    echo '<INPUT TYPE="SUBMIT" VALUE=" SHOW ">';
    echo '</FORM>';

    //definimos el nombre del directorio en el que se encuentran las im�genes
    $path = 'images/';
    $dir = opendir('images');
    //leeemos el contenido del directorio
    while ($file = readdir($dir)) {
        //seleccionamos s�lo los archivos con extensi�n .jpg
        if(is_file($path.$file) && preg_match("/\.jpg$/i", $file)) {
            //generamos el enlace a la imagen original
            echo '<A HREF="'.$path.$file.'" TARGET="_blank">';
            //colocamos la imagen con ruta al script que genera los gr�ficos preliminares
            echo '<IMG SRC="'.$image.'?filename='.$path.$file.'&width='.$width.
              '&height='.$height.'" WIDTH="'.$width.'" HEIGHT="'.$height.
              '" BORDER="1" HSPACE="8" VSPACE="8">';
            echo '</A>';
        }
    }
    //cerramos el descriptor
    closedir($dir);
?>
</BODY></HTML>