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

Last updated Oct 17, 2021

Contenido

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

Cambiar el tamaño de la imagen en Laravel

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

Tomemos el ejemplo de una galería. Mientras trabajamos en una galería, normalmente mostramos la pequeña miniatura en la lista. Cuando alguien hace clic en la miniatura, mostramos una imagen original. Aquí, las miniaturas son la versión redimensionada de la imagen original.

Digamos que el tamaño de la imagen original es 500 500 y el contenedor de miniaturas es de 200 200. En este caso, debe cambiar el tamaño de la imagen original según el tamaño del contenedor de miniaturas. Usar una imagen de gran tamaño en un recipiente pequeño es una mala práctica. Afecta el rendimiento del sitio web.

Este es un ejemplo de por qué deberíamos cambiar el tamaño de las imágenes. Hay muchos otros también. Dicho esto, echemos un vistazo a cómo cambiar el tamaño de la imagen en Laravel usando la biblioteca de imágenes de intervención.

Instalación

Para comenzar, debe instalar la biblioteca de imágenes de intervención en su proyecto de Laravel. Debería tener Composer instalado en su sistema. 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, abra el config/app.phparchivo y agregue las siguientes líneas.

Agregue el proveedor de servicios de este paquete a la $providersmatriz.

InterventionImageImageServiceProvider::class

A continuación, agregue la fachada a la $aliasesmatriz.

'Image' => InterventionImageFacadesImage::class

Cambiar el tamaño de la imagen en Laravel

Para cambiar el tamaño de la imagen, primero tenemos que escribir el código para cargar una imagen. Así que primero crea un directorio donde almacenaremos las imágenes. Dirígete a la terminal y ejecuta el comando:

php artisan storage:link

Este comando crea un directorio de "almacenamiento" en la carpeta "pública". En la carpeta ‘almacenamiento’, almacenaremos una versión completa y una miniatura de las imágenes.

A continuación, cree un formulario en su archivo de vista. También estoy agregando código para el mensaje de éxito en el archivo blade.

@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
<form action="{{ url('PASS_ACTION_URL') }}" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" name="profile_image" id="exampleInputFile">
    </div>
    {{ csrf_field() }}
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Reemplaza el marcador de posición ‘PASS_ACTION_URL’ con tu ruta.

En el controlador, es necesario agregar la fachada ‘Imagen’ de una biblioteca que hemos agregado en el config/app.phparchivo.

<?php
 
namespace AppHttpControllers;
 
use IlluminateHttpRequest;
use Image;
 
class ImageController extends Controller
{
 
}

Al agregar la fachada, podemos llamar a funciones de la biblioteca de imágenes de intervención. En el siguiente código, subiré la imagen en dos lugares. Una es la imagen original en la carpeta ‘profile_images’. El segundo está en el directorio ‘profile_images / thumbnail’. Primero cargaré la imagen original en la carpeta de miniaturas y luego la cambiaré de tamaño.

public function store(Request $request)
{
    if($request->hasFile('profile_image')) {
        //get filename with extension
        $filenamewithextension = $request->file('profile_image')->getClientOriginalName();
 
        //get filename without extension
        $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
 
        //get file extension
        $extension = $request->file('profile_image')->getClientOriginalExtension();
 
        //filename to store
        $filenametostore = $filename.'_'.time().'.'.$extension;
 
        //Upload File
        $request->file('profile_image')->storeAs('public/profile_images', $filenametostore);
        $request->file('profile_image')->storeAs('public/profile_images/thumbnail', $filenametostore);
 
        //Resize image here
        $thumbnailpath = public_path('storage/profile_images/thumbnail/'.$filenametostore);
        $img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
            $constraint->aspectRatio();
        });
        $img->save($thumbnailpath);
 
        return redirect('image')->with('success', "Image uploaded successfully."); //change the route as per your flow
    }
}

Aquí estoy cambiando el tamaño de la imagen proporcionalmente. Al hacerlo, mantendrá la relación de aspecto y la imagen no se cortará. He pasado el ancho como 400 y la altura como 150. Puede cambiar estos valores según sus necesidades.

Si está buscando un recorte difícil, reemplace las líneas siguientes

$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
    $constraint->aspectRatio();
});
$img->save($thumbnailpath);

Con

$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);

Después de esto, obtendrá la miniatura con una dimensión de 100 * 100.

Espero que aprendas a cambiar el tamaño de la imagen en Laravel usando la biblioteca de imágenes de intervención. Comparta sus pensamientos y sugerencias en la sección de comentarios a continuación.

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

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

Instalación

Cambiar el tamaño de la imagen en Laravel

Artículos relacionados