Laravel 11 Add Blur Effect on Image Example

Websolutionstuff | Aug-23-2024 | Categories : Laravel PHP

Hello, laravel web developers! In this article, we'll see how to add a blur effect on images in laravel 11. Here, we'll use the spatie/image composer package to blur an image in laravel 11. This PHP package makes it super easy to apply common manipulations to images like resizing, cropping, and adding effects.

In this example, we will install the spatie/Image package. spatie/Image provides methods to add a blur effect to an image using the load() and blur() methods.

Laravel 11 Add Blur Effect on Image Example

Step 1: Install Laravel 11 Application

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel laravel-11-example

Step 2: Install spatie/image Package

Next, we'll install the spatie/image composer package using the following command.

composer require spatie/image

Step 3: Define Routes

Then, we'll define the routes in the web.php file.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\ImageController;
  
Route::get('image-upload', [ImageController::class, 'index']);
Route::post('image-upload', [ImageController::class, 'store'])->name('image.store');

Step 4: Create Controller File

Now, we'll create a controller file using the following command.

php artisan make:controller ImageController

app/Http/Controllers/ImageController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
use Spatie\Image\Image;
  
class ImageController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(): View
    {
        return view('image-upload');
    }
        
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request): RedirectResponse
    {
        $this->validate($request, [
            'image' => ['required'],
        ]);
        
        $imageName = time().'.'.$request->image->extension();  

        Image::load($request->image->path())
                ->blur(40)
                ->save(public_path('images/'). $imageName);
        
        return back()->with('success', 'You have successfully upload image.')
                     ->with('image', $imageName); 
    }
}

Note: create a images folder in the public folder.

Step 5: Create a Blade File

Next, we'll create a blade file and create a form to upload images.

resources/views/image-upload.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How to Add Blur Effect on Image in Laravel 11 - Websolutionstuff</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>
        
<body>
<div class="container">
  
    <div class="card mt-5">
        <h3 class="card-header p-3"><i class="fa fa-star"></i> How to Add Blur Effect on Image in Laravel 11 - Websolutionstuff</h3>
        <div class="card-body">

            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> There were some problems with your input.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
  
            @if ($message = Session::get('success'))
                <div class="alert alert-success alert-block">
                    <strong>{{ $message }}</strong>
                </div>
                <img src="images/{{ Session::get('image') }}">
            @endif
            
            <form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
        
                <div class="mb-3">
                    <label class="form-label" for="inputImage">Image:</label>
                    <input 
                        type="file" 
                        name="image" 
                        id="inputImage"
                        class="form-control @error('image') is-invalid @enderror">
        
                    @error('image')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
         
                <div class="mb-3">
                    <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Upload</button>
                </div>
             
            </form>
        </div>
    </div>
</div>
</body>
      
</html>

Step 6: Run the Laravel 11 Application

Now, run the laravel 11 application using the following command.