In this tutorial, we will see how to use image with grayscale in laravel 8.

We will see example of image with grayscale in laravel 8.

Given below is the full example for simply image with grayscale using Laravel 8.



Step 1 : Install Laravel 8 Application

Run this command in your terminal or command prompt:

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



Step 2 : Install Spatie Package

composer require spatie/image



Step 3: Create Routes

Route::get('/image-grayscale', [ImageWithgrayscaleController::class, 'index'])->name('image.grayscale.index');
Route::post('/image-grayscale/store', [ImageWithgrayscaleController::class, 'store'])->name('image.grayscale.store');



Step 4: Create Controller

Run the command below to generate new controller:

php artisan make:controller ImageWithgrayscaleController
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Image;

class ImageWithgrayscaleController extends Controller
{
    public function index()
    {
      return view('imageWithgrayscale');
    }

    public function store(Request $request)
    {
      $input = $request->all();

      $this->validate($request, [
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        $image = $input['image'];
        
        $input['image'] = time().'.'.$image->getClientOriginalExtension();

        $img = Image::make($image->getRealPath());

        $img->grayscale()->save(public_path('/images').'/'.$input['image']);

        return redirect()->back()->with('success','Image Uploaded Successfully')->with('image',$input['image']);
    }
}



Step 5: Create Blade File

<!DOCTYPE html>
<html>
<head>
  <title>Grayscale Image Uploading Demo - nicesnippets.com</title>
</head>
<body>
<div class="container">
  <div class="row mt-5">
    <div class="col-md-6 offset-md-3 mb-3">
      <h2>Grayscale Image Uploading Demo - nicesnippets.com</h2>

      @if (count($errors) > 0)
        <div class="alert alert-danger">
          <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">
          <button type="button" class="close" data-dismiss="alert">×</button>  
            <strong>{{ $message }}</strong>
        </div>
        <div class="row">
          <div class="col-md-12">
            <strong>Grayscale Image:</strong><br/>
            <img src="/images/{{ Session::get('image') }}" width="500px" />
          </div>
        </div>
      @endif
      {!! Form::open(array('route' => 'image.grayscale.store','enctype' => 'multipart/form-data')) !!}
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <strong>Image:</strong>
              {!! Form::file('image', array('class' => 'form-control image')) !!}
            </div>
          </div>
          <div class="col-md-12 text-center">
            <button type="submit" class="btn btn-success">Upload Image</button>
          </div>
        </div>
      {!! Form::close() !!}
    </div>
  </div> 
</div>
</body>
</html>


Run this quick run command:

php artisan serve

Now you can open this URL on your browser:

http://localhost:8000/image-grayscale


I hope this example helps you.