Recortar y redimensionar imágenes en PHP – imagecopyresampled

En esta entrada voy a hablar de un problema que he tenido que hacer frente en uno de los últimos trabajos, recortar y redimensionar imágenes en PHP.

El recorte y redimensionado de imágenes. Para recortar y redimensionar imágenes en PHP he hecho uso de la función imagecopyresampled, la cual ya se usaba en el proyecto, por esta razón fue algo más difícil de entender al principio.

Para tratar de entender los conceptos y además ver qué iba sucediendo usé el log de errores de PHP, podéis leer más información de cómo usar y trabajar con el log de PHP aquí.

Por lo tanto voy a empezar a detallar la función para, más adelante, tratar de solucionar los problemas partir de ella.

Función imagecopyresampled

Esta función PHP será la principal a la hora de recortar y redimensionar imágenes en PHP. (crop & resize images using PHP)

Recortar y redimensionar se hará a partir de esta función de PHP que, aunque es un poco liosa de usar al principio pero, una vez que se ha entendido será muy potente y será la que usaremos para editar imágenes desde PHP así como para recortarlas y redimensionarlas.

[Aquí tenéis el manual para la función en la página oficial de PHP en español.]

Los parámetros de la función según la documentación son los siguientes:

  • dst_image -> Recurso de tipo enlace a la imagen de destino.
  • src_image -> Recurso de tipo enlace a la imagen original.
  • dst_x -> Coordenada x del punto de destino.
  • dst_y -> Coordenada y del punto de destino.
  • src_x -> Coordenada x del punto de origen.
  • src_y -> Coordenada y del punto de origen.
  • dst_w -> Ancho del destino.
  • dst_h -> Alto del destino.
  • src_w -> Ancho original.
  • src_h -> Altura original.

Una vez que tenemos los parámetros de la función y tenemos más información es hora de ponerse manos a la obra.

Obtener los datos de la imagen original

Lo primero para redimensionar imágenes, es coger la imagen original y tenerla en memoria en php.

Para obtener los datos de una imagen, y poder crear una imagen desde un fichero de imagen es necesario tener la ruta al fichero $source. Además, es recomendable saber el tipo (content-type) de la imagen, que se puede obtener de diversas maneras. La más sencilla a través de la extensión del fichero. Una vez que tenemos el tipe ($type) y tenemos la ruta ($source) procedemos a obtener en memoria los datos de la imagen a tratar.

A partir de aquí, teniendo los datos de la imagen original en memoria, ya nos será posible realizar las modificaciones de la imagen, ya sea recortar la imagen, redimensionarla o ambas a la vez.

Eso se realiza con el siguiente código.

En la variable $data tendremos los datos de la imagen original, una vez que hemos usado la función.

Aquí tenemos la imagen que vamos a usar para esta prueba

Imagen de prueba para imagecopyresampled - Original

Imagen de prueba para imagecopyresampled. – Original

Redimensionar imágenes en PHP usando imagecopyresampled

Vamos a comenzar por redimensionar las imágenes, la tarea más sencilla y más fácil de entender.

El procedimiento es sencillo, simplemente consiste en generar una nueva imagen en memoria a partir de la original copiando la imagen anterior con las nuevas dimensiones.

Este pequeño trozo de código es una función util para hacer el resize o redimensionado de una imagen a partir de los datos de la imagen original.

Primero generamos una nueva imagen con las nuevas dimensiones, esto son las 2 primeras líneas de código de la función.

Ahora, una vez generada copiamos en esa nueva imagen a partir de la original con las dimensiones que deseamos.

Aunque es un poco lioso al principio, todo está en entender como funciona la función de PHP imagecopyresampled.

Detalle de la función de redimensionado

Básicamente los parámetros que le pasamos son los indicados en detalle a continuación:

  • 1. El destino.
  • 2. El origen de datos.
  • 3. El punto inicial X de la imagen destino (0).
  • 4. El punto inicial Y de la imagen destino (0).
  • 5. El punto inicial X donde empezar a copiar de la imagen original, al ser una copia completa será 0 en este caso.
  • 6. El punto inicial Y donde empezar a copiar de la imagen original, al ser una copia completa de la imagen será 0 en este caso.
  • 7. El punto final X de la imagen destino, en este caso las nuevas dimensiones (X) de la nueva imagen.
  • 8. El punto final Y de la imagen destino, en este caso las nuevas dimension (Y) de la nueva imagen.
  • 9. El area X a tomar de la imagen original a copiar en el destino. En este caso, todo el ancho al ser toda la imagen.
  • 10. El area Y a tomar de la imagen original a copiar en el destino. En este caso, todo el largo al ser toda la imagen.

Una vez aplicada la función en la variable de destino, tendremos los datos de la nueva imagen con las características deseadas.

Aquí tenemos un ejemplo de cómo ha quedado la imagen después de redimensionar.

Imagen de prueba para imagecopyresampled. - Redimensionada

Imagen de prueba para imagecopyresampled. – Redimensionada

Recortar imágenes en PHP usando imagecopyresampled

Una vez que tenemos los datos en memoria de la imagen original que queremos recortar. La manera más sencilla para recortarla, y lo que vamos a hacer, es generando otra imagen a partir de la original, pero tomando en cuenta los puntos de inicio y fin de recorte de la misma.

Usando el siguiente código se entenderá con más detalle.

Primero generamos una nueva imagen con las nuevas dimensiones, esto sonlas 2 primeras líneas de código de la función.

Aquí si son las mismas que la original, lo que haremos es agrandar el trozo de imagen a recortar, aunque esto ya dependerá de cómo que se quiera modificar la imagen.

Es un poco lioso al principio, pero todo está en entender como funciona la función de PHP imagecopyresampled.

Detalle de la función de recorte

Básicamente, lo que indicamos aquí es:

  • 1. El destino.
  • 2. El origen de datos.
  • 3. El punto inicial X de la imagen destino (0).
  • 4. El punto inicial Y de la imagen destino (0).
  • 5. El punto inicial X donde empezar a recortar de la imagen original. En este caso, se empezará a trazar la nueva imagen desde la posición 10 de la original.
  • 6. El punto inicial Y donde empezar a recortar de la imagen original. En este caso, se empezará a trazar la nueva imagen desde la posición 10 de la original.
  • 7. El punto final X de la imagen destino, en este caso las nuevas dimensiones (X) de la nueva imagen.
  • 8. El punto final Y de la imagen destino, en este caso las nuevas dimension (Y) de la nueva imagen.
  • 9. El area X a tomar de la imagen original a copiar en el destino. En este caso, la zona recortada será de 200 px en el eje X.
  • 10. El area Y a tomar de la imagen original a copiar en el destino. En este caso, la zona recortada será 200 px en el eje Y.

Una vez aplicada la función en la variable de destino, por fin tendremos los datos de la nueva imagen con las características deseadas.

Aquí tenemos a continuación como nos quedaría la imagen.

Imagen de prueba. Recortada y redimensionada.

Imagen de prueba para imagecopyresampled. – Recortada y redimensionada

Ejemplo de recorte básico

Aquí voy a usar otro pequeño trozo de código, en donde se explicará algo mejor la función de recorte y se verá más fácil.

En este caso, por ejemplo, lo que se ha producido es un recorte de una parte de la imagen original.

  • 1. Desde el punto 10 en el eje X hasta el punto 210
  • 2. Desde el punto 10 en el eje Y hasta el punto 210

Y esa zona recortada se añade en una imagen nueva, también en este caso al ser del mismo tamaño que la original lo que hemos hecho ha sido agrandar una porción de la imagen original.
Ya solo queda ir probando y jugando con las diferentes alternativas.

Generar datos binarios a partir de los datos de la imagen

Muy bien, esto ya sería nuestro último paso.

Una vez que tenemos generados los datos de la nueva imagen, ya sea recortada o redimensionada. Lo siguiente será generar los datos binarios a partir de los datos de la imagen.

Para ello podemos usar la siguiente función.

También aquí volvemos a necesitar el tipo de dato, y según el tipo de dato generar los datos binarios correspondientes.

Para ello usaremos un buffer de datos de PHP y una vez generados los datos binarios de la imagen y almacenados en una variable los destruiremos, todo ello antes de devolver los datos obtenidos para así evitar perdidas y fugas de memoria, además como vemos es una función muy simple y fácil de entender.

Con unas pocas funciones, hemos reducido la complejidad de la función imagecopyresampled de PHP también así podemos trabajar con nuestras propias funciones más sencillas y, en consecuencia, hacer un código más legible y entendible, obviamente esto nos va a permitir modificar imágenes de una manera más sencilla y simple.

En resumen, hemos visto que para recortar y redimensionar imágenes en PHP con una única función de PHP y un pequeño encapsulamiento y limpieza de código en funciones, se puede manejar de una manera sencilla, fácil y reutilizable.

Enlaces de interes

http://php.net/manual/es/function.error-log.php

http://php.net/manual/es/function.print-r.php

http://php.net/manual/es/function.imagecopyresampled.php

Comparte 🙂

Si te ha gustado el contenido de este artículo no te olvides de compartirlo ya que con eso me harías muy feliz. GRACIAS 😉

Error Log

En esta entrada voy a hablar de “error_log” la opción para almacenar información tales como variables para depurar, guardar errores, comprobar resultados o queries … en PHP.

Uso básico de error_log

Normalmente, durante el desarrollo, uno siempre necesita para “debuggear” ir almacenando variables en un log para ir comprobando el estado del sistema o para comprobar o dejar rastro de por dónde va pasando la aplicación en desarrollo.

Para almacenar algo en el log usando PHP, se hace de una manera muy simple, usando la función de PHP “error_log“.

 

A continuación vamos a explicar el código.

$var es una variable con lo que queremos salvar en el log, entraré más en profundidad más adelante, para salvar objetos complejos y algunas situaciones excepcionales.

$path es la ruta o path del fichero donde vamos a almacenar $var.

Finalmente, llamando a “error_log($var, 3, $path);” se nos salvará $var en nuestro fichero.

NOTA:

Usamos ‘3’ por defecto para indicarle a la función de “error_log” que el destino es un fichero de texto. Puedes encontrar más información de error_log en la página oficial de error_log en PHP.net.

Usando error_log para guardar objetos de forma legible

Pero el código anterior, solo nos sirve para almacenar tipos simples, lo cual la mayoría de las veces puede no sernos del todo útil.

Pero por defecto no se guardar de una manera legible al usuario, por lo que necesitamos adaptar un poco el uso que hacemos de error_log.

Para ello, vamos a hacer uso de “print_r” para poder almacenar así, de forma fácil de leer y de entender para el usuario, cualquier tipo de objeto o array.

Un ejemplo usando el siguiente código en PHP:

Usando el código de arriba, tendremos en nuestro fichero de log un resultado como en la imagen siguiente. En caso de no usar “print_r” no se guardaría en el fichero de log de ninguna manera, ya que al usar “print_r” con el objecto a almacenar y el “prettify” marcado a true, nos devolverá un string del objeto de una manera fácil de leer y comprender para usuarios, algo muy útil, sobre todo durante el desarrollo de una aplicación.

Más información de “print_r” en la página oficial de PHP sobre la función print_r.

error_log - salida de un objeto en fichero de log

Creando una función personalizada de error_log

Finalmente, durante el desarrollo es normal usar muchas veces las llamadas a funciones de log, por lo que una manera de encapsular y simplificar el código es realizar una función para ello, lo cual será más fácil de recordar y de usar.

También evitaremos repetir código en distintos sitios y tendremos un código más limpio y elegante.

Un ejemplo podría ser el siguiente.

Como se puede ver, he personalizado una función y he añadido algunos ejemplos de uso. He añadido por defecto, después de guardar los datos he añadido un salto de línea para así la siguiente vez que se ejecute, aparezca en una nueva línea.

Enlaces de interes

http://php.net/manual/es/function.error-log.php

http://php.net/manual/es/function.print-r.php

URL amigable para una buena experiencia de usuario


UX - URL amigable para una buena experiencia de usuario

Derechos de la imagen: http://doepud.co.uk/

Contenido del post

¿Qué es una URL amigable?
¿Cuál es el mejor momento para pensar en diseñar las URL?
¿Cómo debería de ser una URL amigable?
Feedback
Fuentes y lecturas recomendadas
Comparte

¿Qué es una URL amigable?

¡Hola a todos! Este artículo va sobre el uso de URLs amigables para proporcionar una mejor experiencia de usuario que haga que el acceso al contenido sea más fácil de recordar por el usuario que accede a nuestro sitio.

Las URL son una parte fundamental de un sitio web, de hecho, son la dirección desde la que un usuario puede acceder directamente al contenido que se le está ofreciendo, por lo que si son intuitivas y fáciles de recordar y de leer proporciona una muy buena experiencia de usuario, aparte de tener URLs fáciles de recordar y amigables es siempre un buen añadido al SEO de un sitio web.

Una URL es un identificador universal de un recurso en Internet lo cual significa que desde cualquier dispositivo o navegador web, siempre que se acceda a esa URL se mostrará siempre el mismo contenido.
Por este motivo debería de dársele más importancia durante el desarrollo de la estructura de un sitio web.

Por otro lado, aquí voy a dejar algunos de mis artículos hablando de empatía, análisis de usuario, UX y experiencia de usuario, Por donde empezar en UX, usabilidad…aquí tienes la lista con el resto de entradas

seguir leyendo →  

Experiencia de usuario por donde empezar

UX - Experiencia de usuario

Experiencia de Usuario

Derechos de la imagen: www.katzenbergdesing.net

Contenido del post

Introducción
Libros fundamentales en UX
Cursos gratuitos de UX
Blogs de UX
Comparte

¡Hola a todos! Este post es debido a las preguntas que he tenido de algunos compañeros que se han interesado por Experiencia de Usuario (User eXperience, UX) y no saben por donde empezar, voy a dejar aquí algunos libros y cursos online gratuitos donde comenzar a aprender acerca de UX.

Aquí voy a dejar algunos de mis artículos hablando de empatía,análisis de usuario,UX y experiencia de usuario,usabilidad…aquí tienes la lista con el resto de entradas

Antes de nada, comento que la amplía mayoría de los recursos y blogs que encontrarás acerca de experiencia de usuario será en inglés, así como la gran mayoría de cursos y libros, aunque cada vez existen más especialistas que se animan a compartir sus conocimientos y experiencias en español, por eso también dejaré una lista de blogs en español que son muy interesantes y se va a aprender mucho leyendo el contenido de los mismos.

seguir leyendo →