Cargando



Manipular imagen PHP y librerias de graficos GD

La biblioteca para gráfico GD, es una librería desarrollada en c y que permite manipular imágenes desde varios lenguajes de programación entre ellos PHP.


mar 30 2016 00:01
Avanzado
abr 10 2016 23:36

Cuando desarrollamos una web en PHP, utilizamos imágenes que subimos en forma dinámica y muchas veces necesitamos manipular ya sea para redimensionar o poner una marca de agua. Utilizar imágenes dinámicas es muy util ya que muchas veces los usuarios o los webmaster suben imágenes desde un formulario y necesitamos que se muestren iguales o cambiar el tamaño de la imagen de manera automática.

 

La biblioteca para gráfico GD, es una librería desarrollada en C y que permite manipular imágenes desde PHP. Esta librería nos ofrece funciones para gestionar imágenes en diferentes formatos como JPEG, GIF, PNG, SWF, TIFF, el formato png es el mas utilizado ya que permite transparencia.

 

panta01.jpg

 

Veremos algunos ejemplos de como manipular imágenes con PHP y GD para ejecutar los ejemplos deberemos tener un servidor remoto o uno local que soporte PHP, para instalar uno local podemos utilizar Xampp como vimos en el tutorial Montar Xampp para convertir tu ordenador en un servidor web.

 

A continuación veremos como redimensionar imágenes y guardar la imagen redimensionada en una carpeta del servidor.

<?php
//carpeta o url de la imagen s redimensionar
$imagenoriginal="moto01.jpg";

//Creamos una imagen temporal para poder manipularla
//sin modificar imagen original
$imagentemporal = imagecreatefromjpeg($imagenoriginal);

//Especificamos cual sera el ancho y alto maximo permitido
//para la imagen redimensionada
$anchomaximo = 200;
$altomaximo = 200;
//Extraigo los atributos ancho y alto de la imagen original
$dimensiones=getimagesize($imagenoriginal);
$ancho=$dimensiones[0];
$alto=$dimensiones[1];

//Calculamos el ancho y alto propocional de
//la imagen redimensionada
$anchoproporcional = $anchomaximo / $ancho;
$altoproporcional = $altomaximo / $alto;
//En caso de que el ancho y el alto estan dentro,
//de los maximos permitidos, los mantenemos
if( ($ancho <= $anchomaximo) && ($alto <= $altomaximo) ){
  $anchonuevo = $ancho;
  $altonuevo = $alto;
}
//Si el alto es mayor que el ancho
//calculamos un alto proporcional al maximo permitido
elseif (($anchoproporcional * $alto) < $altomaximo){
  $altonuevo = ceil($anchoproporcional * $alto);
  $anchonuevo = $anchomaximo;
}
//Si el ancho es mayor que el alto
//calculamos un ancho proporcional al maximo permitido
else{
  $anchonuevo = ceil($altoproporcional * $ancho);
  $altonuevo = $altomaximo;
}

//Creamos una imagen de tamaño $anchonuevo  por $altonuevo .
$imgnueva=imagecreatetruecolor($anchonuevo,$altonuevo);
//Copiamos la imagen temporal sobre la imagen nueva con las
//dimensiones definidas
imagecopyresampled($imgnueva,$imagentemporal,0,0,0,0,$anchonuevo, $altonuevo,$ancho,$alto);
//Quitamos la imagen temporal de la Ram
imagedestroy($imagentemporal);

//Definimos la calidad de la imagen nueva
$calidad=100;
//separamos el nombre del archivo de su extension
$archivo=explode(".",$imagenoriginal);
//Añadimos al nuevo archivo la palabra mini
//para saber que es un miniatura
$archivonuevo=$archivo[0]."-mini.".$archivo[1];

//Guardamos la nueva imagen en la carpeta que
//asignemos, por ejemplo podemos tener una carpeta
//para imagenes originales y otra para miniaturas
imagejpeg($imgnueva,$archivonuevo,$calidad);
?>
Por ejemplo tomamos una imagen cuadrada de 1000 pixeles de ancho por 1000 pixeles de alto.

 

 

panta02.jpg

 

 

Después de ejecutar el script la imagen nos quedará de la siguiente manera:

 

 

panta03.jpg

 

 

Probamos a continuación con una imagen rectangular de 1550 pixeles de ancho por 896 pixeles de alto.

 

 

panta04.jpg

 

 

Después de ejecutar el script la imagen se redimensiona automáticamente:

 

 

panta05.jpg

 

 

Podemos observar que las dos imágenes no superan nunca el tamaño máximo definido de 200 pixeles de ancho.
GD puede utilizarse para unir imágenes transparentes, como insertar marcas de agua o una etiqueta en la imagen.
Uno de los usos mas comunes es en las tiendas virtuales poner un cartel sobre una imagen de un producto cuando este esta agotado o fuera de stock.

 

A través de las nuevas versiones de PHP, se han añadido nuevas funcionalidades para manipulación de imágenes, también se pueden instalar otra librerías como ImageMagic o Gmagic que proveen funciones que nos facilitan gestionar imágenes de manera mas fácil que utilizando GD.

 

A continuación veremos como poner un recuadro y escribir un texto dentro de una imagen a modo de marca de agua o para poner algún detalle o membrete.

<?php
// Creamos una imagen temporal con la imagen original
$imagentemporal = imagecreatefromjpeg('moto01.jpg');
// Creamos un recuadro para poner texto
//indicamos el ancho y alto del recuadro
$recuadro = imagecreatetruecolor(200, 75);
//Añadimos bordes al recuadro
imagefilledrectangle($recuadro, 0, 0, 195, 70, 0x009900);
imagefilledrectangle($recuadro, 9, 9, 190, 65, 0xFFFFFF);

// Definimos los márgenes para la recuadro
// e indicamos cual sera el alto y ancho del recuadro
//en coordenadas x e y para saber donde ira en la foto
$margenderecho = 10;
$margeninferior = 10;
$posicionx= imagesx($recuadro);
$posiciony= imagesy($recuadro);

// Copiamos la imagen y el recuadro y creamos una nueva imagen
imagecopymerge($imagentemporal, $recuadro, imagesx($imagentemporal) - $posicionx- $margenderecho, imagesy($imagentemporal) - $posiciony- $margeninferior, 0, 0, imagesx($recuadro), imagesy($recuadro), 50);

//usamos un tipo de fuente que debera estar en la misma carpeta
$font = 'arial.ttf';
//Asignamos el color rojo en formato RGB al texto
$colortexto = imagecolorallocate ($imagentemporal, 255, 0, 0);
//Definimos el texto que aparecerá en la imagen
	   imagettftext($imagentemporal, 16, 0, 805, 950, $colortexto, $font, 'Moto 01 Modelo A');
		 imagettftext($imagentemporal, 16, 0, 805, 975, $colortexto, $font, 'midominio.com');

// Guardamos la imagen nueva en la carpeta y libreamos la Ram
imagepng($imagentemporal, 'nuevaimagen.png');
imagedestroy($imagentemporal);

?>

panta06.jpg

 

Los colores los podemos tomar de la web Color Codes y el tipo de letra podremos descargar miles de fuentes ttf gratuitas desde la web Dafont.

 

Este método de graficar texto es muy utilizado por los captchas como medio de seguridad para login o registro de usuarios, por ejemplo se generan letras o números aleatorios y luego se muestran como una imagen que el usuario deberá escribir en una caja de texto para validar.

 

A continuación haremos el código para poner un logo o marca de agua en una foto, para ello desarrollaremos el siguiente código.

<?php
// Creo una imagen png con el logo  o la imagen que utilizaremos
// como marca de agua
$marca = imagecreatefrompng('marca.png');
//Creo una imagen temporal de la imagen a marcar
$imagentemporal = imagecreatefromjpeg('moto02.jpg');

// Establecer los márgenes inferiores y derecho de la imagen de marca de agua

$margenderecho = 10;
$margeninferior = 10;
// Establecemos la posicion donde se ubicara la marca
$posicionx= imagesx($marca);
$posiciony= imagesy($marca);

// Copiar la marca de agua sobre la imagen temporal y
// calculamos la posición de la imagen marca o logo.
imagecopy($imagentemporal, $marca, imagesx($imagentemporal) - $posicionx- $margenderecho, imagesy($imagentemporal) - $posiciony- $margeninferior, 0, 0, imagesx($marca), imagesy($marca));

//Guardamos la imagen marcada en un nuevo archivo
imagepng($imagentemporal, 'nuevaimagen.png');
// Mostramos imagen con marca y liberar Ram
header('Content-type: image/png');
imagepng($imagentemporal);
imagedestroy($imagentemporal);
?>
[color=#a9a9a9]Código para poner logo o marca de agua en una foto[/color]

 

 

panta07.jpg

 

 

Poner marcas de agua nos permite evitar el hotlinking o robo de imágenes cuando otros usuario copian nuestras imágenes.

 

Siempre debemos recordar hacer una copia de la imagen original antes de aplicarle cualquier transformación, es muy importante guardar en una variable la url de la imagen de origen y en lo posible guardar las imágenes modificadas en otra carpeta.

 

Podemos hacer nuestras propias funciones para manipular imágenes en forma dinámica enviándole unos pocos parámetros como la imagen original, los tamaños, ancho y alto, si necesitamos un texto o un logo para luego obtener una imagen en miniatura o una imagen con marca de agua. Siempre al final del proceso recordemos que debemos liberar la memoria ram invocando a la función e indicando la imagen a liberar.

imagedestroy( $imagen);
Descargar Plugin Papepiling

 

Fichero Adjunto  plugin-papepiling.zip   12,53K   376 Descargas


¿Te ayudó este Tutorial?


1 Comentarios

GRACIAS !!!!!!!!!!!!!!!!!!!!!!

Valió el esfuerzo de buscar varias horas una solución fácil al redimensionamiento de imágenes con marca de agua. Aunque tuve que hacerle modificaciones, es de fácil uso.

 

Gracias.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X