redimensionar imágenes en Laravel 12 con Intervention Image v3

Autor: J. Luis

#Laravel

Aprende a redimensionar imágenes en Laravel 12 usando Intervention Image v3. Optimiza el rendimiento y mejora la experiencia de usuario con ejemplos prácticos y código

Suscríbete a nuestro canal en Youtube

En aplicaciones web modernas, optimizar imágenes es clave para mejorar la velocidad de carga y la experiencia de usuario. En este tutorial, aprenderás a redimensionar imágenes en Laravel 12 utilizando la versión 3 del paquete Intervention Image , una herramienta poderosa y flexible para manipular gráficos

Requisitos Previos

Laravel 12 instalado.
Conocimientos básicos de PHP y Blade.
Composer para gestionar dependencias.

Paso 1: Instalar Intervention Image v3

Ejecuta el siguiente comando para instalar la versión 3 del paquete:

bash

composer require intervention/image-laravel

Este paquete soporta drivers como GD y Imagick para procesamiento de imágenes

php artisan vendor:publish --provider="Intervention\Image\Laravel\ServiceProvider"

Rutas

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FrontController;


/// RUTAS PARA REDIMENSIONAR IMAGENES
Route::get('/upload', function () {    return view('upload'); });
Route::post('upload', [FrontController::class, 'uploadImage']);

Controller

<?php

namespace App\Http\Controllers;
use Detection\MobileDetect;
use Illuminate\Support\Str;
use Illuminate\Http\Request;
use Intervention\Image\Laravel\Facades\Image;


class FrontController extends Controller
{

    public function index(){
        $detect = new MobileDetect;
        if ($detect->isMobile()) {
            $imagePath = asset('images/mobile-image.png');
        } else {
            $imagePath = asset('images/desktop-image.jpg');
        }
        return view('welcome', compact("imagePath"));

    }




    public function uploadImage(Request $request){
        // Validar que se haya subido una imagen
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048', // Máximo 2MB
        ]);

        // Obtener el archivo cargado
        $upload = $request->file('image');

        // Generar un nombre único para el archivo   image.jpg  .png  .gif .webp
        $filename = Str::random(40) . '.' . $upload->getClientOriginalExtension();

        // Redimensionar la imagen
        $image = Image::read($upload)
                ->scale(width:700); 

        // Guardar la imagen redimensionada en el almacenamiento
        $path = storage_path('app/public/images/' . $filename);
        $image->save($path);

        return back()->with('success', 'Imagen redimensionada y guardada correctamente.');

    }
}

Vista

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <h1>Subir Imagen</h1>
    @if(session('success'))
        <p style="color: green;">{{ session('success') }}</p>
    @endif
    <form action="/upload" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="file" name="image" accept="image/*" required>
        <button type="submit">Subir y Redimensionar</button>
    </form> 
</body>
</html>

Leido 1114 veces | 0 usuarios

Código fuente no disponible.

Compartir link del tutorial con tus amigos