In this post, I will show to you how to make a grayscale image from the original image in laravel. Sometimes, we may require making a grayscale image when end user upload a image. The grayscale image looks better in the event that you have a decent format site. In the article, we will figure out how to make a grayscale picture utilizing intervention package in laravel. Intercession package give a lot of things to do with an image like resize, Grayscale, write on image etc. Intervention package is also perfect to generate a grayscale image.
So, let’s do work with the following steps to generate a grayscale image and save it to your server.
Step 1: Laravel 5 Installation
Here we are going to install and configure basic requirements for Laravel application
|
1 |
composer create-project --prefer-dist laravel/laravel demoApp "5.2.*" |
Step 2: Install Intervention Image Package
In this step, we will download and install intervention/image package for an image processing using composer.json requirement. This package used to generate a grayscale image from original chosen image. Add the bellow line in composer.json page on require section
|
1 2 3 4 5 |
"require": { ......... ......... "intervention/image":"*" } |
and run the composer update command to finish the above step. After extracting above package we need to add providers and aliases names classes in config/app.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
return [ ...... $provides => [ ...... ......, Intervention\Image\ImageServiceProvider::class, ], $aliases => [ ..... ....., 'Image' => Intervention\Image\Facades\Image::class, ] ] |
Step 3: Add Controller for image process
For creating a grayscale image so first, we need to define a controller to handle user request and image process. So create ImageGrayController.php using command prompt.
|
1 |
php artisan make:controller ImageGrayController |
After creating controller goto app/Http/Controllers folder also open it and add the below methods for grayscale image process.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Facades\Validator; use App\Http\Requests; use Image; class ImageGrayController extends Controller { public function index() { return view('imageGrayscale'); } public function imageGrayscale(Request $request) { $this->validate($request, [ 'image_file' => 'required|image|mimes:jpeg,png,jpg' ]); $image_file = $request->file('image_file'); $image_name = uniqid().'.'.$image_file->getClientOriginalExtension(); $destPath = public_path('/images'); $image = Image::make($image_file->getRealPath()); $image->save($destPath.'/'.$image_name); $image->greyscale()->save($destPath.'/gray_'.$image_name); return back() ->with('success','Image Upload successful') ->with('image_name',$image_name); } } |
Step 5: Define Route
Here we need to define a route for call a view image upload blade template page.
|
1 2 |
Route::get('/imageGrayscale', ['as'=>'imageGrayscale','uses'=>'ImageGrayController@index']); Route::post('/imageGrayscale', ['as'=>'imageGrayscalePost','uses'=>'ImageGrayController@imageGrayscale']); |
Step 6: Blade Template page creation
Goto the resource/view folder then create imageGrayscale.blade.php page for image upload and show the grayscale image in an HTML page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
@extends('layouts.app') @section('content') <style type="text/css"> h3.center-text { text-align: center; } </style> <div class="container"> <h3 class="center-text">Image to Grayscale Image Conversion - Learn Infinity</h3> {!! Form::open(array('route' => 'imageGrayscalePost','enctype' => 'multipart/form-data')) !!} <div class="row"> <div class="col-md-offset-2 col-md-4"> <br/> @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> @endif @if (count($errors) > 0) <div class="alert alert-danger"> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <br/> <div class="form-group"> <label>Add Image:</label> {!! Form::file('image_file', array('class' => 'form-control')) !!} </div> <br/> <br/> <div class="form-group"> <button type="submit" class="btn btn-primary">Upload</button> </div> </div> <div class="col-md-6" class="center-text"> @if ($message = Session::get('success')) @php($image_name = Session::get('image_name') ) <div class="col-md-6"> <img src="{{URL::asset('public/images/'.$image_name) }}" class="img-responsive" /> </div> <div class="col-md-6"> <img src="{{URL::asset('public/images/gray_'.$image_name) }}" class="img-responsive" /> </div> @endif </div> </div> {!! Form::close() !!} </div> @endsection |
