Guia básica para editar imágenes en PHP con GD
14 de octubre del 2008 
Escrito por Alex Barros Crear y editar imágenes con PHP puede ser muy fácil si tienes instalada la biblioteca GD en tu servidor.
Aunque las opciones que ofrece GD son muy básicas, son suficientes para desarrollar scripts con capacidades muy superiores. Ahora voy a presentaros estas funciones básicas con ejemplos, para que puedas crear aplicaciones más complejas.
Crear la imagen de cero o desde un archivo
Para tratar imágenes en GD trabajamos con recursos o variables tipo resource de imágenes. Esto es una varible que representa a la imagen.
Para crear un nuevo recurso de imagen podemos usar la función imagecreate() aúnque es más recomendable usar la función imagecreatetruecolor()
-
$im = imagecreatetruecolor(300, 200); //a partir de aqui trabajo con una imagen de 300×200
-
$im2 = imagecreatetruecolor(100, 100); //he creado otra imagen distinta con dimensiones 100×100
Si queremos partir de una imagen ya existente, para convertirla en recurso tendremos que usar la función adecuada dependiendo del formato de la imagen. Los principales formatos son JPEG, PNG y GIF; con las funciones imagecreatefromjpeg(), imagecreatefrompng() y imagecreatefromgif() respectivamente.
-
$miJpeg =imagecreatefromjpeg(‘miimagen.jpg’); //he creado un recurso a partir del archivo miimagen.jpg
Si quieres ahorrarte el pensar a la hora de crear un recurso a partir de imagen, o desconoces el formato de entrada de la imagen (y quieres que lo haga automáticamente) puedes usar esta función para crear cualquier tipo de imagen.
-
function newimage($src) {
-
$im = false;
-
switch(true) {
-
$im = imagecreatefromstring( getUrlData($src) );
-
imagealphablending($im, true);
-
imagesavealpha($im, true);
-
break;
-
$im = imagecreatefromjpeg($src);
-
break;
-
$imp = imagecreatefromgif($src);
-
-
$x = imagesx($imp);
-
$y = imagesy($imp);
-
$im = imagecreatetruecolor($x, $y);
-
imagefilledrectangle( $im, 0, 0, $x, $y, imagecolorallocate($im, 255, 255, 255) );
-
imagecopy($im, $imp, 0, 0, 0, 0, $x, $y);
-
break;
-
$im = imagecreatefrompng($src);
-
-
imagealphablending($im, true);
-
imagesavealpha($im, true);
-
break;
-
}
-
return $im;
-
}
-
function getUrlData($url){
-
$ch = curl_init($url);
-
curl_setopt($ch, CURLOPT_FAILONERROR, 1);
-
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30);
-
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
-
$get = curl_exec($ch);
-
curl_close($ch);
-
return $get;
-
}
Esta función puede crear una imagen a partir de JPEG, PNG, GIF o URL (requiere CURL)
Si queremos saber las dimensiones de un recurso de imagen, usaremos las funciones imagesx($im) e imagesy($im) que devuelven el ancho y alto del recurso, en píxeles, respectivamente.
Copiar, recortar y redimensionar
La modificación más básica que podemos hacer a una imagen es recortarla y redimensionarla.
En ambos casos la forma de trabajar es, en primer lugar crear un nuevo recurso con las dimensiones apropiadas, y en segundo lugar copiar de la imagen origen a la imagen destino aplicando el cambio deseado.
Recortar una imagen
Para recortar una imagen de, por ejemplo, 500 x 400 en 50px por la derecha y por abajo, haremos lo siguiente:
- Creamos un nuevo recurso de 500 – 50 = 450 por 400 – 50 = 350px
- Usamos la función imagecopy para copiar de la imagen origen, en nuestra nueva imagen
bool imagecopy ( resource $im_destino , resource $im_origen , int $pos_x_destino , int $pos_y_destino , int $pos_x_origen , int $pos_y_origen , int $ancho_origen , int $alto_origen )
- Los dos primeros parámetros son los recursos destino y origen
- Los dos siguientes son la posición en eje x e y de la imagen destino, donde queremos comenzar a copiar (en nuestro caso 0,0; porque el eje está arriba y a la izquierda)
- Los dos siguientes son el ancho y el alto de la imagen que queremos recortar del aimagen original. En nuestro caso 450 y 350.
-
$im_origen = imagecreatefromjpeg(‘mi_imagen.jpg’); //sabemos que mide 500 x 400
-
$im_destino = imagecreatetruecolor(450, 350); //im_destino contendrá la nueva imagen recortada
-
-
imagecopy($im_destino, $im_origen, 0, 0, 0, 0, 450, 350);
-
// Ahora im_destino es im_origen recortada por abajo y por la derecha 50px
[descargar código] Ejemplo: [original] [recortada dinámicamente]
Redimensionar una imagen
En este ejemplo vamos a redimensionar a la mitad la imagen origen, sea cual sea su tamaño.
Crearemos primero un nuevo recurso con las dimexiones x/2 e y/2, y usaremos la función imagecopyresampled() (también podríamos usar imagecopyresized(), pero la que vamos a usar suaviza los píxeles interpolándolos – tiene mejor calidad)
-
$im_origen = imagecreatefrompng(‘foo.png’);
-
$ancho = imagesx($im_origen);
-
$alto = imagesy($im_origen);
-
-
-
$im_destino = imagecreatetruecolor($nuevo_ancho, $nuevo_alto);
-
imagecopyresampled($im_destino, $im_origen, 0, 0, 0, 0, $nuevo_ancho, $nuevo_alto, $ancho, $alto);
-
// ahora im_destino es la mitad de grande que im_origen
Dibujar figuras y texto
Las figuras que GD nos deja pintar son muy básicas, parecidas a las que ofrece el programa Paint
En este punto lo más importante es crear colores para una imagen. Los colores se deben crear y asociar a una imagen mediante la función imagecolorallocate(). El color lo indicamos mediante parámetros RGB (Red Green Blue) que podemos extraer fácilmente de cualquier paleta, como la del Photoshop o el Gimp
Dibujar un rectángulo
Quizás la figura más simple. Podemos dibujar sólo el borde del rectángulo con la función imagerectangle() o el rectangulo relleno de color, con la función imagefilledrectangle()
bool imagerectangle ( resource $imagen , int $x1 , int $y1 , int $x2 , int $y2 , int $color )
bool imagefilledrectangle ( resource $imagen , int $x1 , int $y1 , int $x2 , int $y2 , int $color )
-
$imagen = imagecreatefromjpeg(‘mi_imagen.jpg’);
-
$negro = imagecolorallocate($imagen, 0, 0, 0);
-
//voy a dibujar un rectangulo negro entre las coordenadas (5,5) y (25,15), recuerda que el eje está arriba a la izquierda
-
imagefilledrectangle($imagen, 5, 5, 25, 15, $negro);
Otras figuras
Existen muchas figuras que puedes dibujar con GD, desde una línea hasta un polígono, pasando por la elipse o el píxel. Sólo busca la que más te conviene en la documentación, o combina varias para obtener la figura deseada.
Escribir texto
Es realmente sencillo. Si no te quieres complicar la vida, puedes usar la función imagestring() que te da la opción de elegir entre 5 fuentes internas indicando sólo el número de referencia…
-
$im = imagecreate(100, 30); //creo una nueva imagen de 100×30
-
$fondo = imagecolorallocate($im, 255, 255, 255); //blanco. El primer color creado, se utiliza como fondo automaticamente para esa imagen
-
$color_texto = imagecolorallocate($im, 0, 0, 255); //azul
-
// escribo la cadena arriba a la izquierda con la fuente #5
-
imagestring($im, 5, 0, 0, "¡Hola mundo!", $color_texto);
… o si quieres tener más control sobre el estilo, puedes usar fuentes TrueType con la función imagettftext() (en la web DaFont tienes miles de fuentes TrueType gratuitas)
-
$im = imagecreatetruecolor(400, 30); //creo una nueva imagen de 400×30
-
// creo algunos colores
-
$blanco = imagecolorallocate($im, 255, 255, 255);
-
$gris = imagecolorallocate($im, 128, 128, 128);
-
$negro = imagecolorallocate($im, 0, 0, 0);
-
imagefilledrectangle($im, 0, 0, 399, 29, $blanco); //relleno el fondo
-
-
// El texto a pintar
-
$texto = "Boozox.net";
-
// El archivo ttf, escribe la ruta correctamente!!
-
$fuente = ‘fuente.ttf’;
-
-
// Agrego una sombra al texto
-
imagettftext($im, 20, 0, 11, 21, $gris, $fuente, $texto);
-
-
// Escribo el texto
-
imagettftext($im, 20, 0, 10, 20, $negro, $fuente, $texto);
[descargar código]
Demo:
Tratar bien la transparencia en PNG
Las imágenes PNG admiten un canal Alpha que indica la opacidad en cada punto de la imagen, para crear efectos semitransparentes. Si te interesa que esta transparencia se muestre correctamente, deberás calentarte un poco más la cabeza, y tener el canal Alpha siempre en cuenta. Te aconsejo que incluyas estas dos líneas después de crear una nueva imagen con transparencia (aunque tendrás que estar siempre atento de que el canal alpha no se pierda!)
-
$im = imagecreatefrompng(‘mi_transparencia.png’);
-
//conservar transparencia
-
imagealphablending($im, true);
-
imagesavealpha($im, true);
Recuerda también que puedes crear colores con canal de transparencia usando imagecolorallocatealpha() en lugar de imagecolorallocate()
Exportar la imagen para visualizarla
Después de haber modificado nuestra imagen tal como deseamos, tendremos que exportarla. Existe una función para cada formato de salida (imagejpeg(), imagepng(), imagegif(), etc…). Personalmente te recomiendo siempre exportar en PNG porque se conserva la calidad y la nitidez mucho mejor.
En todos los casos tendremos la opción de generar el código de la imagen, si queremos que el archivo PHP simule ser la propia imagen, o indicarle dónde queremos que almacene la imagen resultado.
Para el primer caso, tendremos que indicar mediante las cabeceras que lo que estamos a punto de mostrar es una imagen. Para esto usamos la función header() indicando el tipo de archivo en concreto de que se trata (image/jpeg, image/png o image/gif).
-
//este codigo se incluiria al final del proceso de edicion, suponiendo que $im es el recurso de la imagen que queremos mostrar
-
imagepng($im);
Una vez creado este archivo, podemos mostrar el resultado en una página HTML simplemente creando una etiqueta de imagen que referencie a ese archivo .php
-
<img src="imagen.php" />
Si queremos almacenar en nuestro disco la imagen resultante, tendremos que pasar como segundo parámetro a la función el nombre del archivo que queremos generar.
-
imagepng($im,‘ruta/miarchivo.png’);
Recuerda que me interesa mucho tu opinión. Crees que falta algo? tienes dudas? vas a trabajar con la librería GD ahora que sabes cómo funciona? has hecho experimentos curiosos con imágenes dinámicas? …
Categorias: Código, Imagen Digital, PHP, Ubuntu | 
53 comentarios »
Según comentan en 
Una vez el plugin está activado, aparecerá en el panel de escritura un botón con la palabra “Imaset”. Al pulsar este botón se abrirá el panel de Imaset, mostrando tus imágenes, y los filtros disponibles divididos en categorías.
donde (x-b) es la distancia entre el pixel que está siendo modificado y el píxel del que se está tomando el valor, a y c valen 1, y f(x) resulta un número Real entre 0 y 1 que representa el porcentaje de influencia.
Imaset 2.1 está muy cerca. La primera beta ya está siendo distribuida entre algunos beta-testers, y la versión definitiva no tardará mucho en llegar.
Respeta el copyleft