Cambiar el tamaño de la imagen en PHP usando la biblioteca de imágenes de intervención

¿Está buscando cómo cambiar el tamaño de las imágenes en PHP? Mientras trabajamos en la aplicación web, necesitamos crear diferentes versiones en miniatura de la imagen original. La miniatura es la versión redimensionada de su imagen original. En este artículo, estudiamos cómo cargar y redimensionar imágenes en PHP.

¿Por qué deberíamos cambiar el tamaño de las imágenes?

En el sitio web, hay varios escenarios en los que necesitamos mostrar una versión corta de una imagen grande. Un ejemplo popular es la Galería de imágenes. En la galería, solíamos mostrar una lista de imágenes pequeñas. Cuando un usuario hace clic en la imagen pequeña, se abrirá la imagen grande en la ventana emergente. Otro ejemplo es mostrar artículos relacionados donde mostramos pequeñas imágenes junto con el título y la descripción de una publicación.

En estos escenarios, necesitamos generar una imagen pequeña (miniatura) usando nuestra imagen original. Una pequeña miniatura reduce el tamaño de sus páginas. Como está utilizando una miniatura pequeña, el navegador requiere poco ancho de banda para cargar la imagen. Agregará algunos beneficios al sitio web. Algunos de ellos son:

• Mejora el rendimiento del servidor
• Reducir el ancho de banda
• Mejorar la velocidad de la página

Dicho esto, echemos un vistazo a cómo cambiar el tamaño de la imagen en PHP.

Empezando

Intervention Image es una biblioteca de código abierto que actúa como una herramienta para cambiar el tamaño de la imagen. Bajo el capó, Intervention Image utiliza GD Library e Imagick para el procesamiento y la manipulación de imágenes.

Para comenzar, debe instalar la biblioteca de imágenes de intervención en su aplicación. Recomiendo usar Composer para la instalación de una biblioteca.

Abra la terminal en el directorio raíz de su proyecto y ejecute el siguiente comando.

composer require intervention/image

Después de instalar la biblioteca, debe incluir su entorno en su aplicación. Para ello, incluya a continuación dos líneas en el archivo PHP.

<?php
// include composer autoload
require 'vendor/autoload.php';
  
use InterventionImageImageManagerStatic as Image;

Para cargar y cambiar el tamaño de la imagen, necesitamos un formulario donde se pueda navegar por la imagen y presionar el botón de enviar. Utilice el siguiente HTML que contiene la entrada del archivo y un botón de envío.

<form method="post" enctype="multipart/form-data">
    <p><input type="file" name="image" /></p>
    <input type="submit" name="submit" value="Submit">
</form>

Cambiar el tamaño de la imagen en PHP usando la imagen de intervención

Hemos instalado la biblioteca y creado un formulario. A continuación, tenemos que cargar y cambiar el tamaño de la imagen sobre la marcha. Voy a crear dos directorios uploadsy thumbnails. En la uploadscarpeta almacenaremos la imagen original. La versión en miniatura de la imagen se almacenará dentro del thumbnailsdirectorio.

Utilice el siguiente código que almacenará la versión original y en miniatura de la imagen en los directorios uploadsy thumbnailsrespectivamente.

<?php
require 'vendor/autoload.php';
  
use InterventionImageImageManagerStatic as Image;
 
$allowed_mime_type = array('image/jpg', 'image/jpeg', 'image/png', 'image/gif');
 
if (isset($_POST['submit'])) {
 
    if (in_array($_FILES['image']['type'], $allowed_mime_type)) {
 
        if (!file_exists('uploads')) {
            mkdir('uploads', 0755);
        }
 
        $filename = time().'_'.$_FILES['image']['name'];
        $filepath = 'uploads/'. $filename;
        move_uploaded_file($_FILES['image']['tmp_name'], $filepath);
 
        if (!file_exists('uploads/thumbnails')) {
            mkdir('uploads/thumbnails', 0755);
        }
 
        $thumbnailpath = 'uploads/thumbnails/'. $filename;
        $img = Image::make($filepath);
        $img->resize(300, null, function ($constraint) {
            $constraint->aspectRatio();
        });
        $img->save($thumbnailpath);
    }
}

En el código anterior, pasé el ancho como 300 y cambié el tamaño de la imagen manteniendo su relación de aspecto. Puede pasar el valor de ancho según sus requisitos. Se recomienda mantener la relación de aspecto al cambiar el tamaño de la imagen. Usando la relación de aspecto, la imagen no se estirará. Sin embargo, si está buscando un cultivo duro, reemplace las siguientes líneas

$img->resize(300, null, function ($constraint) {
    $constraint->aspectRatio();
});

Con

$img->resize(300, 150)->save($thumbnailpath);

Conclusión

En este tutorial, estudiamos cómo cambiar el tamaño de las imágenes manteniendo su relación de aspecto. También escribimos un código que recortará la imagen. La biblioteca de imágenes de intervención proporciona algunas opciones más para un resizemétodo. Puede leer más sobre esto en su documentación.

Artículos relacionados

• Cambiar el tamaño de la imagen en Laravel usando la biblioteca de imágenes de intervención
• Cambiar el tamaño de la imagen en PHP usando TinyPNG
• Arrastrar y soltar carga de archivos usando JavaScript y PHP