Laravel 9 - Convert Original Image to Grayscale Image using intervention/image

In this article, i will show you how to Convert an Original Image to a Grayscale Image using the intervention/image laravel package. The PHP image intervention package is exorbitantly helpful for image manipulation, and it offers numerous features to handle image-related tasks. We will use image intervention’s greyscale() method for making a grayscale image from the original image

Step - 1: Create Laravel 9 Application

First, we need to create the laravel 9 application help of running the following command in your terminal.

composer create-project laravel/laravel imageApp --prefer-dist

Step - 2 : Database Setup

Now, you open your .env file and make sure your database setting is perfect.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=

Step - 3: Install the Image Intervention Package

This step explains how to install the intervention image package in the laravel application, execute the following command from the command prompt.

composer require intervention/image

Nov opens the config/app.php file and register the following provider for this package.

'providers' => [
    ....                
    'Intervention\Image\ImageServiceProvider'
],

'aliases' => [
    ....                
    'Image' => 'Intervention\Image\Facades\Image'
]

Step - 4: Create Controller

Now, create the ImageFileController by the following artisan command.

php artisan make:controller ImageFileController

Now, open the ImageFileController.php file and write the following code into it.


namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Image;
class ImageFileController extends Controller
{
    public function index()
    {
        return view('image_file');
    }
    public function imgToGreyscale(Request $request)
    {
        $input = $request->all();
        $this->validate($request, [
              'file' => 'required|image|mimes:jpg,jpeg,png,gif,svg|max:2048',
          ]);
  
          $image = $input['file'];
          $input['file'] = time().'.'.$image->getClientOriginalExtension();
          $img = Image::make($image->getRealPath());
          $img->greyscale()->save(public_path('/uploads').'/'.$input['file']);
  
          return redirect()->back()->with('success','Grayscale file uploaded.')->with('image', $input['file']);
    }
}

Step - 5: Create Routes

The following code writes into laravel's route file.

routes/web.php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageFileController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/file', [ImageFileController::class, 'index']);
Route::post('/upload-file', [ImageFileController::class, 'imgToGreyscale'])->name('generateGrayscaleImg');

Step - 6: Create the view blade file.

resources/views/image_file.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <title>Laravel</title>
</head>
<body>
    <div class="container mt-5" style="max-width: 550px">
        <h2 class="mb-5">Laravel Grayscale Image Example</h2>     
        <form action="{{route('generateGrayscaleImg')}}" method="post" enctype="multipart/form-data">
            @csrf
            @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <strong>{{ $message }}</strong>
            </div>

            <div class="col-md-12 mb-3">
                <strong>Grayscale Image:</strong><br/>
                <img src="/uploads/{{ Session::get('image') }}" width="550px" />
            </div>
            @endif
            @if (count($errors) > 0)
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
            <div class="custom-file">
                <input type="file" name="file" class="custom-file-input" id="chooseFile">
                <label class="custom-file-label" for="chooseFile">Select file</label>
            </div>
            <button type="submit" name="submit" class="btn btn-outline-danger btn-block mt-4">
                Upload
            </button>
        </form>
    </div>
</body>
</html>

Step - 7 : Run Laravel App:

Once all the steps have been completed, input the command and press Enter to launch the Laravel application:

php artisan serve

and the hit the following localhost URL on your browser

http://localhost:8000/file

I hope you like this article and it will be help to you.