Cambiar el tamaño de la imagen es fácil con PHP

¿Alguna vez quisiste un método de uso múltiple y fácil de usar para cambiar el tamaño de tus imágenes en PHP? Bueno, para eso están las clases de PHP: piezas de funcionalidad reutilizables que llamamos para hacer el trabajo sucio detrás de escena. Vamos a aprender cómo crear nuestra propia clase que estará bien construida y ampliable. Cambiar el tamaño debería ser fácil. ¿Cuan sencillo? ¡Qué tal tres pasos!

Introducción

Para darle una idea rápida de lo que estamos tratando de lograr con nuestra clase, la clase debería ser:

  • fácil de usar
  • formato independiente: puede abrir, cambiar el tamaño y guardar una serie de formatos de imagen diferentes
  • Tamaño inteligente: ¡sin distorsión de la imagen!
Este no es un tutorial sobre cómo crear clases y objetos, y aunque esta habilidad ayudaría, no es necesaria para seguir este tutorial.

Hay mucho que cubrir, comencemos.


1. Preparación

El primer paso es fácil. En su directorio de trabajo, cree dos archivos: uno llamado índice.phpel otro redimensionar-clase.php


2. Llamar al Objeto

Para darle una idea de lo que estamos tratando de lograr, comenzaremos codificando las llamadas que usaremos para cambiar el tamaño de las imágenes. Abre tu índice.php archivo y agregue el siguiente código.

Como puede ver, hay una buena lógica en lo que estamos haciendo. Abrimos el archivo de imagen, establecemos las dimensiones a las que queremos cambiar el tamaño de la imagen y el tipo de cambio de tamaño. Luego guardamos la imagen, eligiendo el formato de imagen que queremos y la calidad de imagen. Guarde y cierre su índice.php expediente.

En el código anterior, puede ver que estamos abriendo un jpg archivo pero guardando un gif. Recuerde, se trata de flexibilidad.


3. Crea el esqueleto de la clase

Es la Programación Orientada a Objetos (POO) lo que hace posible esta sensación de facilidad. Piense en una clase como un patrón; puede encapsular los datos, otro término de la jerga que en realidad solo significa ocultar los datos. Luego podemos reutilizar esta clase una y otra vez sin la necesidad de volver a escribir el código de cambio de tamaño; solo necesita llamar a los métodos apropiados tal como lo hicimos en el paso dos. Una vez que se ha creado nuestro patrón, creamos instancias de este patrón, llamadas objetos.

«La función de construcción, conocida como constructor, es un método de clase especial que la clase llama cuando crea un nuevo objeto».

Comencemos a crear nuestra clase de cambio de tamaño. Abre tu redimensionar-clase.php expediente. A continuación se muestra una estructura de esqueleto de clase realmente básica que he denominado ‘redimensionar’. Tenga en cuenta la línea de comentario de la variable de clase; aquí es donde comenzaremos a agregar nuestras variables de clase importantes más adelante.

La función de construcción, conocida como constructor, es un método de clase especial (el término «método» es lo mismo que función, sin embargo, cuando se habla de clases y objetos, el término método se usa a menudo) que es llamado por la clase cuando crea un nuevo objeto Esto hace que sea adecuado para nosotros realizar algunas inicializaciones, lo que haremos en el siguiente paso.

Tenga en cuenta que es un doble guión bajo para el método de construcción.


4. Codifica el Constructor

Vamos a modificar el método constructor anterior. En primer lugar, pasaremos el nombre de archivo (y la ruta) de nuestra imagen para cambiar el tamaño. Llamaremos a esta variable $fileName.

Necesitamos abrir el archivo pasado con PHP (más específicamente la biblioteca PHP GD) para que PHP pueda leer la imagen. Estamos haciendo esto con el método personalizado. openImage(). Llegaré a la implementación de este método en un momento, pero por ahora, necesitamos guardar el resultado como una variable de clase. Una variable de clase es solo una variable, pero es específica de esa clase. ¿Recuerdas el comentario de la variable de clase que mencioné anteriormente? Agregar $image como una variable privada escribiendo private $image;. Al establecer la variable como private, está limitando el alcance de esa variable para que solo la clase pueda acceder a ella. A partir de ahora podemos hacer una llamada a nuestra imagen abierta, conocida como recurso, lo que haremos más adelante cuando cambiemos el tamaño.

Mientras estamos en eso, almacenemos la altura y el ancho de la imagen. Tengo la sensación de que serán útiles más adelante.

Ahora debería tener lo siguiente.

Métodos imagesx() y imagesy() son funciones integradas que forman parte de la biblioteca GD. Recuperan el ancho y el alto de su imagen, respectivamente.


5. Abriendo la Imagen

En el paso anterior, llamamos al método personalizado openImage(). En este paso vamos a implementar la funcionalidad dentro de ese método. Queremos que la secuencia de comandos piense por nosotros, por lo que, según el tipo de archivo que se pase, la secuencia de comandos debe determinar qué función de GD Library llama para abrir la imagen. Esto se logra fácilmente comparando la extensión de los archivos con una declaración de cambio.

Extraemos la extensión del nombre del archivo usando el strrchr() función en PHP que devuelve parte de la cadena principal desde la última aparición del carácter especificado hasta su final. Por ejemplo, el nombre del archivo papaya.jpg nos dará .jpg y el nombre del archivo me.gusta.la.papaya.jpg también nos dará .jpg.

Después de determinar la extensión, usamos el apropiado imagecreatefrom función para recuperar un recurso de imagen.


6. Cómo cambiar el tamaño

Este paso es realmente solo una explicación de lo que vamos a hacer, así que no hay tarea aquí. En el siguiente paso, vamos a crear un método público al que llamaremos para realizar nuestro cambio de tamaño; por lo que tiene sentido pasar el ancho y el alto, así como información sobre cómo queremos cambiar el tamaño de la imagen. Hablemos de esto por un momento. Habrá escenarios en los que le gustaría cambiar el tamaño de una imagen a un tamaño exacto. Genial, vamos a incluir esto. Pero también habrá momentos en los que tendrá que cambiar el tamaño de cientos de imágenes y cada imagen tendrá una relación de aspecto diferente: piense en imágenes de retratos. Redimensionarlos a un tamaño exacto causará una distorsión severa. Si echamos un vistazo a nuestras opciones para evitar la distorsión podemos:

  1. Cambie el tamaño de la imagen lo más cerca posible de nuestras nuevas dimensiones de imagen, manteniendo la relación de aspecto.
  2. Cambie el tamaño de la imagen lo más cerca posible de nuestras nuevas dimensiones de imagen y recorte el resto.

Ambas opciones son viables, dependiendo de sus necesidades.

Sí. vamos a intentar manejar todo lo anterior. En resumen, vamos a proporcionar opciones para:

  1. Cambiar el tamaño por ancho/alto exacto. (exact)
  2. Cambiar el tamaño por ancho: se establecerá el ancho exacto, la altura se ajustará de acuerdo con la relación de aspecto. (width)
  3. Redimensionar por altura: como redimensionar por ancho, pero la altura se establecerá y el ancho se ajustará dinámicamente. (height)
  4. Determina automáticamente las opciones 2 y 3. Si estás recorriendo una carpeta con fotos de diferentes tamaños, deja que el script determine cómo manejar esto. (auto)
  5. Cambiar el tamaño, luego recortar. Este es mi favorito. Tamaño exacto, sin distorsión. (crop)

7. Cambio de tamaño. ¡Vamos a hacerlo!

Hay dos partes en el método de cambio de tamaño. El primero es obtener el ancho y el alto óptimos para nuestra nueva imagen creando algunos métodos personalizados y, por supuesto, pasando nuestra opción de cambio de tamaño como se describe anteriormente. El ancho y el alto se devuelven como una matriz y se establecen en sus respectivas variables. Siéntase libre de pasar como referencia, pero no soy un gran fanático de eso.

La segunda parte es lo que realiza el cambio de tamaño real. Usaremos dos funciones PHP integradas para nuestro cambio de tamaño. Están:

Le recomiendo que lea sobre ellos en la documentación.

En resumen, el imagecreatetruecolor() La función devolverá un objeto de imagen que representa una imagen negra del tamaño especificado. los imagecopyresampled() La función se utiliza para copiar y cambiar el tamaño de parte de una imagen con remuestreo.

También guardamos la salida del imagecreatetruecolor() (una nueva imagen en color verdadero) como una variable de clase. Agregar private $imageResized; con sus otras variables de clase.

El cambio de tamaño lo realiza un módulo PHP conocido como GD Library. Esta biblioteca proporciona muchos de los métodos que estamos usando.

En el fragmento de código anterior, calculamos las nuevas dimensiones de la imagen y creamos un objeto de imagen en color verdadero en consecuencia. Este objeto de imagen se pasa luego a imagecopyresampled() donde los datos de la imagen original se copian sobre ella. Qué parte se copia depende del resto de los parámetros.


8. El árbol de decisiones

Cuanto más trabajo haga ahora, menos tendrá que hacer cuando cambie el tamaño. Este método elige la ruta a seguir, con el objetivo de obtener el ancho y el alto de cambio de tamaño óptimos en función de su opción de cambio de tamaño. Llamará al método apropiado, del cual crearemos en el siguiente paso.

En este punto, simplemente llamamos a diferentes métodos auxiliares que implementaremos en la siguiente sección.


9. Dimensiones óptimas

Cuando la opción de cambio de tamaño se establece en height o widthusamos la relación de aspecto de la imagen original para calcular el ancho y alto apropiados para nuestra nueva imagen.

Cuando la opción de cambio de tamaño se establece en auto, usamos el ancho y el alto originales de la imagen para determinar si la imagen redimensionada debe tener un ancho o alto fijo. Para imágenes en orientación horizontal, mantenemos el ancho fijo. Para imágenes en orientación vertical, mantenemos la altura fija. Si la imagen original es un cuadrado, seleccionamos la dimensión fija usando el nuevo valor de ancho y alto.

los getOptimalCrop() método puede parecer un poco confuso al principio porque todavía estamos calculando $optimalHeight y $optimalWidth que usamos para cambiar el tamaño. La razón es que en lugar de recortar la imagen directamente al ancho y alto especificado, nuestra clase recorta las imágenes después de cambiar el tamaño.

Digamos que las dimensiones de una imagen son 1920w y 1080h. Desea recortarlo a 1200w y 200h. Como puede ver, la relación entre el ancho original y el ancho nuevo será menor que la relación de altura correspondiente. Por lo tanto, primero se cambiará el tamaño de la imagen de tal manera que su ancho se reduzca a 1200 y la altura cambie en consecuencia.

El recorte real de la imagen se realizará después de que se haya completado el cambio de tamaño.


10. Recortar

Si optó por un recorte, es decir, ha utilizado la opción de recorte, entonces tiene un pequeño paso más. Vamos a recortar la imagen desde el centro. Recortar es un proceso muy similar al cambio de tamaño pero con un par de parámetros de tamaño más.


11. Guarda la imagen

Estamos llegando allí; casi termino. Ahora es el momento de guardar la imagen. Pasamos en el camino, y la calidad de imagen que nos gustaría oscilar entre 0-100, siendo 100 la mejor, y llamamos al método apropiado. Un par de cosas a tener en cuenta sobre la calidad de la imagen: JPG utiliza una escala de 0 a 100, siendo 100 la mejor. Las imágenes GIF no tienen una configuración de calidad de imagen. Los PNG sí, pero usan la escala 0-9, siendo 0 la mejor. Esto no es bueno ya que no podemos esperar que lo recordemos cada vez que queramos guardar una imagen. Hacemos un poco de magia para estandarizar todo.

Ahora también es un buen momento para destruir nuestro recurso de imagen para liberar algo de memoria. Si tuviera que usar esto en producción, también podría ser una buena idea capturar y devolver el resultado de la imagen guardada.


Conclusión

Bueno, eso es todo, amigos. Gracias por seguir este tutorial, espero que te sea útil.

Esta publicación ha sido actualizada con contribuciones de Monty Shokeen. Monty es un desarrollador de pila completa al que también le encanta escribir tutoriales y aprender sobre nuevas bibliotecas de JavaScript.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.