Faviconos PHP

facebook-svg gplus-svg twitter-svg

Procesamiento de imágenes y GD

Podemos utilizar PHP para crear y manipular imágenes. Para esto necesitamos tener instalada la extensión GD. La buena noticia es que versiones a partir de PHP 4.3 vienen con la extensión GD ya instalada. Para verificar si la tenemos o no, podemos utilizar phpinfo() – una función que, como sabemos, muestra la información sobre la configuración del PHP instalado.

la extensión GD

También lo podemos verificar sacando en pantalla ( con prinr_r() o var_dump() ) el array gd_info(), un array que reúne información acerca de la biblioteca GD instalada. Están instalados los elementos del array gd_info() cuyo valor es 1 si utilizamos print_r o bool(true) si utilizamos vad_dump.

gd-info array

Si no tienes instalada la librería GD, aquí puedes encontrar la información necesaria para instalarla: GD: Instalación/Configuración Lea más acerca de phpinfo(), prinr_r(), var_dump() o acerca del array gd_info()

Sobre colores

En el PHP podemos crear imágenes basadas en "paleta" o imágenes de "color verdadero". Una imagen basada en paleta ( 8 bit palette image ) es una imagen que puede contener hasta 256 colores ( 1 byte = 8bit y tiene 28, o sea 256 posibles valores: de 0 a 255 ).
Una imagen de color verdadero ( truecolor image ) soporta 24 bit: o sea 8 bit para cada componente RGB. Esto quiere decir 256 matices de rojo (R) de verde (V) y de azul (B), resultando en un total de 16 777 216 variaciones de color. Impresionante! Imagínense una imagen de color verdadero que soporta 48 bit.

Como construir una imagen en PHP

Este es un ejemplo minimalista.
Empezamos creando un nuevo archivo PHP llamado imagen.php


  //crea una imagen de 100x100
  $imagen = imagecreatetruecolor(100, 100);
  // establece el color de la imagen: azul
  // utiliza un color RGB  (0, 0, 255)
  $azul = imagecolorallocate($imagen, 0, 0, 255 );
  // llena la $imagen de $azul
  imagefill($imagen, 0, 0, $azul);
  //esta será una imagen PNG
  header("Content-type: image/png");
  // imprime la imagen en pantalla
  imagepng($imagen);
  // libera la memoria asociada con la imagen creada
  imagedestroy($imagen);

Funciones GD utilizadas en el ejemplo anterior:

1. Para crear una nueva imagen en color verdadero utilizamos: imagecreatetruecolor($x, $y) donde $x representa la anchura, y $y representa la altura de la imagen.

Lea más acerca de imagecreatetruecolor()

2. Si no asignamos un color de relleno para la imagen, imagecreatetruecolor() crea una imagen completamente negra. Para definir el color utilizamos: imagecolorallocate($imagen, R, G, B ), donde $imagen es la imagen que queremos llenar de color, mientras que R, G, y B son números de 0 a 255 representando el valor de cada componente rojo (R), verde (G) y azul (B) del color RGB.

Lea más acerca de imagecolorallocate()

3. Para llenar de color la imagen utilizamos imagefill($imagen, $x, $y, $color); donde: $imagen es la imagen que queremos llenar de color, $x y $y son las coordenadas en x y respectivamente en y del punto donde imagefill() empieza a llenar de color la imagen ( normalmente 0, 0: o sea la esquina arriba izquierda ). El parámetro $color es el color definido anteriormente con imagecolorallocate().

Lea más acerca de imagefill()

4. A continuación procedamos a imprimir ( o guardar ) la imagen creada. Pero antes tenemos que enviar un encabezado para definir lo que sigue como una imagen PNG: header('Content-type: image/png'). Recuerde que header() debe ser llamado antes de mostrar nada en pantalla, ni tan solo una línea en blanco.

Lea más acerca de header()

5. La función imagepng()  imprime en pantalla o guarda una imagen PNG . Para mantener las cosas sencillas, hemos utilizado solo un parámetro con la función imagepng(). El parámetro $imagen representa la imagen creada anteriormente.

Lea más acerca de imagepng()

6. Finalmante la función imagedestroy() libera cualquier memoria asociada con la imagen anteriormente creada.

Lea más acerca de imagedestroy()

Crear testimagen.php

A continuación creamos otro archivo: testimagen.php. Utilizamos la imagen creada ( imagen.php) en dos ocasiones: como favicono y como imagen.

<!doctype html>
<html>
 <head>
   <meta charset="UTF-8">
   <link rel="icon" type="image/png" href ="imagen.php ">
   <title>Untitled Document</title>
 </head>
 <body>
  <h1>imagen creada con php</h1>
  <p><img src="imagen.php" alt="imagen creada con php" /></p>
 </body>
</html>
 

3. Abrimos testimagen.php en el navegador.

Imágenes dinámicas

Transformar una imagen creada con PHP en una imagen dinámica es fácil. A continuación mantendremos las cosas sencillas para que sea todavía más fácil.

Queremos que el usuario pueda cambiar el color de la imagen creada anteriormente en PHP a su gusto. En este caso "su gusto" == $_GET['hex'].

¿Que necesitamos?

Necesitamos una función para validar el valor introducido por el usuario como color hex. La función validarHex(), que escribiremos a continuación, utiliza una expresión regular ( regEx). Sabemos que el color hex tiene que contener letras y/o números (0-9). Las letras tienen que ser de A a F y pueden ser mayúsculas ( A-F ) o minúsculas ( a-f ). Tambien tenemos que tener en cuenta que un color hex puede tener {3} o {6} caracteres:

/^([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/

Una vez establecida la expresión regular, utilizamos la función preg_match() que realiza una comparación del código hex con la expresión regular. La función devuelve ( return ) true si hay una coincidencia con la expresión regular establecida por el patrón. De lo contrario devuelve false.


function validarHex($hex){
$hex_regex = "/^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/";
return preg_match($hex_regex, $hex) ? true : false;
}

Lea más acerca de preg_match()

También necesitamos una función que transforme el color hex introducido por el usuario en un color RGB. Para esto podemos utilizar  hexdec(), una función PHP que devuelve el equivalente decimal del número hexadecimal utilizado como argumento.

Lea más acerca de hexdec()

La función deHexaRgb(), que escribiremos a continuación,  coge el código hex y lo separa en los 3 componentes: rojo, verde y azul. Utilizando la función hexdec(), transforma cada componente de color hexadecimal en un número en base 10, y devuelve un array con el valor de estos componentes. Utilizaremos estos valores para establecer el color de la imagen.php con imagecolorallocate().

Lea más acerca de cómo calcular el equivalente RGB de un color HEX


function deHexaRgb( $color ) {
        if ( strlen( $color ) == 6 ) {
                list( $r, $g, $b ) = array( $color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5] );
        } elseif ( strlen( $color ) == 3 ) {
                list( $r, $g, $b ) = array( $color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2] );
        } else {
                list( $r, $g, $b ) = array(00, 00, 00 );        
        }
        $r = hexdec( $r );
        $g = hexdec( $g );
        $b = hexdec( $b );
        return array( "red" => $r, "green" => $g, "blue" => $b );
}

Ponemos estas dos funciones ( validarHex() y deHexaRgb() ) en un nuevo fichero llamado funciones_img.php.

Modificar testimagen.php

A continuación añadiremos a testimagen.php el texto destacado en rojo. Prácticamente incluimos las funciones de imagen, nos aseguramos que el valor del color hex introducido por el usuario es correcto y asignamos su valor a la variable $hex. Utilizamos la variable $hex para enviar a imagen.php valor del color hex a utilizar.

<?php  
  include('funciones_img.php'); 
  // Si tenemos $_GET['hex'] y si valida como color hex  
  if(isset($_GET['hex']) && validarHex($_GET['hex'])){  
  $hex = $_GET['hex']; 
  }
?>
  <!doctype html>
  <html>
   <head>
     <meta charset="UTF-8">
     <link rel="icon" type="image/png" href ="imagen.php?hex=<?php echo $hex; ?>">
     <title>Imagen creada con php</title>
   </head>
   <body>
    <h1>Imagen creada con php</h1>
    <p><img src="imagen.php?hex=<?php echo $hex; ?>" alt="imagen creada con php" /></p>
   </body>
  </html>

Modificar imagen.php

Exactamente como en el caso testimagen.php incluimos las funciones de imagen y nos aseguramos que el valor del color hex introducido por el usuario es correcto. El usuario puede abrir la imagen en el navegador, por tanto tenemos que tomar todas las precauciones necesarias.  Antes de construir la imagen la función deHexaRgb() calcula los valores RGB para rojo ( $R ) verde ( $G ) y azul ( $B ). Utilizamos estas variables para establecer el color de la imagen: imagecolorallocate($imagen, $R, $G, $B ).


  //esta será una imagen PNG
  header("Content-type: image/png");
  include("funciones_img.php");
  // Si existe $_GET["hex"] y si valida como color hex
  if(isset($_GET["hex"]) && validarHex($_GET["hex"])){ 
  $hex = $_GET["hex"];
  // de lo contrario utiliza el azul
  }else{$hex = "00f";
  }
  //llama la función deHexaRgb y extrae los valores RGB para rojo verde y azul
  $RGB = deHexaRgb( $hex );
  $R = $RGB["red"];
  $G = $RGB["green"];
  $B = $RGB["blue"];
  //crea una imágen de 100x100
  $imagen = imagecreatetruecolor(100, 100);
  // establece el color de la imagen
  // utiliza los valores de $R, $G, $B calculadas con deHexaRgb() 
  $relleno = imagecolorallocate($imagen, $R, $G, $B );
  imagefill($imagen, 50, 50, $relleno);
  // imprime la imagen en pantalla
  imagepng($imagen);
  // libera la memoria asociada con la imagen creada
  imagedestroy($imagen);

Probemos de nuevo

Esta vez probemos cambiar el color de la imagen con $_GET['hex']: testimagen.php?hex=6ab150