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.