Biblioteca Online : ¡La Suscripción ENI por 9,90 € el primer mes!, con el código PRIMER9. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. Aprender a desarrollar un sitio web con PHP y MySQL
  3. Efectos especiales en una imagen
Extrait - Aprender a desarrollar un sitio web con PHP y MySQL Ejercicios prácticos y corregidos (3ª edición)
Extractos del libro
Aprender a desarrollar un sitio web con PHP y MySQL Ejercicios prácticos y corregidos (3ª edición) Volver a la página de compra del libro

Efectos especiales en una imagen

La librería GD

Para crear una imagen en PHP, debe utilizar las funciones de la librería GD. Una librería es un archivo de extensión dll que contiene numerosas funciones PHP.

Para activar esta librería, en primer lugar hay que abrir el archivo php.ini (menú Configuración - PHP) y quitar el punto y coma que está delante de la línea extension=php_gd2.dll. A continuación, reinicie el servidor web (menú Reiniciar).

Atención: si usted alberga su sitio Web en un proveedor de servicios, debe asegurarse de que esta librería está activa, porque no siempre es así.

Creación de una imagen

1. Header

Header indica al navegador que la página PHP reenvía una imagen, y no una página HTML. También indica el tipo de imagen que se ha creado: JPG o PNG.

Si tiene una imagen con mucho color, como por ejemplo una foto, es mejor utilizar el formato JPG o bien el formato PNG, que gestiona la transpariencia. 

El código PHP que debe insertar al inicio de la página es:

<?php 
header("Content-type: image/png"); 
?> 

2. Creación de una imagen vacía

Para crear una imagen vacía debe utilizar la función imagecreate(), que tiene dos parámetros: ancho y alto.

Por ejemplo:

<?php 
header("Content-type: image/png"); 
$imagen = imagecreate(300,150); 
?> 

Este código crea una imagen de 300 x 150 píxeles. La función imagecreatecolor() equivale a imagecreate(), pero sin el límite de 256 colores.

La variable $imagen es un objeto que permite manipular una imagen. Este concepto se ha explicado en el capítulo Funciones y estructuras de control con la función fopen() en la sección Abrir y cerrar un archivo.

3. Creación y visualización de una imagen completa

Antes de mostrar la imagen, debe cambiar el color de fondo, pues de lo contrario será invisible. Para cambiar el color de fondo de la imagen, utilice la función imagecolorallocate(), que toma como parámetros...

Texto y color

1. El color

Esta función es imagecolorallocate(), y se ha tratado anteriormente. Pone color de fondo a una imagen y almacena este color en una variable. Toma como parámetros el recurso y el código RGB.

La sintaxis es:

$color = imagecolorallocate ($recurso, $rojo, $verde, $azul); 

Las variables $rojo, $verde y $azul van de 0 a 255. Puede encontrar el código del color que necesite en los programas Paint o Photoshop.

El siguiente ejemplo muestra un rectángulo azul:

<?php 
header("Content-type: image/png"); 
$imagen = imagecreate(300,150); 
$color_fondo = imagecolorallocate($imagen, 0, 0, 255); 
imagepng($imagen); 
imagedestroy($imagen); 
?> 

2. El texto

La función que permite escribir el texto es imagestring(), que toma como parámetro el recurso, el tamaño de la fuente entre 0 y 5, las coordenadas x e y, la cadena de caracteres y el color de la cadena.

La sintaxis es:

imagestring($recurso, $tamaño_tipo de letra, $x, $y, $cadena, 
$color_cadena); 

El siguiente ejemplo muestra un texto en negro dentro de un rectánculo azul claro:

<?php 
header("Content-type: image/png"); 
$imagen = imagecreate(300,150); 
$color_fondo = imagecolorallocate($imagen, 110, 210, 220); 
//azul claro 
$negro = imagecolorallocate($imagen, 0, 0, 0); 
imagestring($imagen, 3, 50, 50, "Aquí mi texto.", $negro); 
imagepng($imagen); ...

Cambiar el tamaño de una imagen

La función imagecopyresampled() cambia el tamaño de la imagen y la ubica en otra imagen, en un punto concreto de coordenadas.

Esta función toma los siguientes parámetros:

  • La imagen de destino: la imagen se crea con imagecreate().

  • La imagen de origen: imagen cuya miniatura se va a crear.

  • La posición horizontal en la cual se ubicará la imagen en miniatura.

  • La posición vertical en la cual se ubicará la imagen en miniatura.

  • El ancho de la imagen en miniatura.

  • El alto de la imagen en miniatura.

  • El ancho de la imagen de origen: puede tomar solo una parte de la fuente.

  • El alto de la imagen de origen.

En el siguiente ejemplo, el código PHP permite crear una imagen en miniatura de la imagen Koala.jpg y la llama mini_Koala.jpg.

<?php 
 
$imagen_origen = imagecreatefromjpeg("Koala.jpg"); // El origen es la  
                                                   // imagen Koala.jpg 
$destino = imagecreatetruecolor(102, 77); // Creación de la miniatura  
                                          // vacía 
 
$ancho_origen = imagesx($imagen_origen); // cambia el ancho de la imagen 
$alto_origen...

Superponer las imágenes

Para mostrar una imagen sobre otra, utilice la función imagecopy(), que toma los siguientes parámetros:

  • La imagen de destino.

  • La imagen de origen: imagen que hay que superponer.

  • La posición horizontal de la imagen de destino.

  • La posición vertical de la imagen de destino.

  • La posición horizontal de la imagen de origen.

  • La posición vertical de la imagen de origen.

  • El ancho de la imagen de origen.

  • El alto de la imagen de origen.

En el siguiente ejemplo, el código PHP coloca una imagen pequeña ordenador.png sobre la imagen Koala.jpg:

<?php 
header ("Content-type: image/jpeg"); 
 
// Creación de dos imágenes como objeto 
$origen = imagecreatefrompng("ordenador.png"); // El ordenador es 
                                               // el origen 
$destino = imagecreatefromjpeg("Koala.jpg");   // El Koala es 
                                               // el destino 
 
$ancho_origen = imagesx($origen);   //ancho de la imagen origen ...

Las formas

Las funciones de la librería GD dibujan formas como círculos, rectángulos, polígonos, etc.

A continuación mostramos algunas funciones con $recurso de una imagen que se ha creado anteriormente:

  • imagesetpixel($recurso, $x, $y, $color): píxel del color $color en las coordenadas $x,$y.

  • imageline($recurso, $x1, $y1, $x2, $y2, $color): línea de color $color entre las coordenadas $x1,$y1 y las coordenadas $x2,$y2.

  • imagefill($recurso, $x, $y, $color): rectángulo desde las coordenadas $x,$y hasta el ángulo inferior derecho del recurso rellenado con el color $color.

  • imagerectangle($recurso, $x1, $y1, $x2, $y2, $color): rectángulo de contorno que tiene el color $color entre las coordenadas $x1,$y1 y las coordenadas $x2,$y2.

  • imagefilledrectangle($recurso, $x1, $y1, $x2, $y2, $color): rectángulo con el fondo que tiene el color $color entre las coordenadas $x1,$y1 y las coordenadas $x2,$y2.

  • imageellipse($recurso, $x, $y, $ancho, $alto, $color): elipse con coordenadas del centro $x y $y, de ancho $ancho, de alto $alto y el contorno con el color $color.

  • imagefilledellipse($recurso,$x, $y, $ancho, $alto, $color): elipse con coordenadas del centro $x y $y, de ancho $ancho, de alto $alto y cuyo fondo tiene el color $color.

  • imagepolygon($recurso, $registro_puntos, $numero_puntos, $color): polígono con un número de puntos igual a $numero_puntos, donde las coordenadas de estos puntos se ubican...

Ejemplos

1. Ejemplo 1

Un ejemplo común consiste en mostrar un gráfico que representa el número de visitas diarias a un sitio Web. Estos datos pueden proceder de una base de datos MySQL, pero se indican de forma fija en el ejemplo.

<?php 
header("Content-type: image/png"); 
$registro_visitas = array(520, 458, 642, 741, 254, 657, 356, 912, 259, 712); 
 
$anchoImagen = 450; 
$altoImagen = 400; 
$imagen = imagecreate($anchoImagen, $altoImagen); 
$blanco = imagecolorallocate($imagen, 255, 255, 255); 
$negro = imagecolorallocate($imagen, 0, 0, 0); 
$rojo = imagecolorallocate($imagen, 255, 0, 0); 
 
// trazo horizontal para representar el eje de los días    
imageline($imagen, 10, $altoImagen-10, $anchoImagen-10,  
$altoImagen-10, $negro);  
// Mostrar el número de días  
for ($dia=1; $dia<=10; $dia++) {  
 imagestring($imagen, 0, $dia*40, $altoImagen-10, $dia, $negro); 
}  
 
// trazo vertical que representa el número de visitas  
imageline($imagen, 10, 10, 10, $altoImagen-10, $negro); 
 
// el número máximo de visitas proporcional a lo alto de la imagen 
$visitas_maximas = 1000;  
// trazado de rectángulos  
for ($dia=1; $dia<=10; $dia++) {  
 $altoRectangulo = round(($registro_visitas[$dia-1]*$altoImagen) 
/$visitas_maximas);  ...