Laravel5 create and upload Grayscale Image with example

By | August 22, 2018
Laravel5 create and upload Grayscale Image

If you need to create grey scale image from an image in your laravel application, then you can learn and integrate this feature in this article. In this acticle i will let you know Laravel5 create and upload Grayscale Image with example. You will upload an image then it will convert that image to grey scale image and will upload on server.

In this example i will use intervention/image to generate grey scale image. I  have already installed laravel application. So let’s start integration of grey scale image with the following steps.

Step1: Install intervention/image

We will install intervention/image package with composer by running the below command –

composer require intervention/image

By running the above command all the necessary files of this package will be downloaded automatically in your applications vendor directory.

Next add provider and alias for this package into config/app.php file

config/app.php

return [

  ......

  $provides => [

    ......

    ......,

    'Intervention\Image\ImageServiceProvider'

  ],

  $aliases => [

    .....

    .....,

    'Image' => 'Intervention\Image\Facades\Image'

  ]

]

Now you can use the feature provided be image intervention package.

Step2: Add a controller

In this step we will create a controller where we will put our business logic.

Execute the following command into your terminal

php artisan make:controller ImageController

After executing the above command, a new file ImageController.php will be created in controllers directory of  your application.

Now put the following code into this controller file.

app/Http/Controllers/ImageController.php

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;
use App\Http\Requests;
use Image;


class ImageController extends Controller
{


  /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function grayScaleImage()
    {
    	return view('image_handling.gray_scale_image');
    }


    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function grayScaleImagePost(Request $request)
    {
      $this->validate($request, [
      	'title' => 'required',
            'imagefile' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        $image = $request->file('imagefile');
        $input['image_name'] = time().'.'.$image->getClientOriginalExtension();

        $destinationPath = public_path('/uploads');
        $img = Image::make($image->getRealPath());
        $img->greyscale()->save($destinationPath.'/'.$input['image_name']);

        return back()
        	->with('success','Image Uploaded successfully.')
        	->with('image_name',$input['image_name']);
    }


}

You are done with the business login now you will need to create a view file where you can choose the image

Step3: Add a view/blade file

Let’s give a name gray_scale_image.blade.php to this view file. I am putting this file in image_handling directory. And copy the below code into this file.

resources/views/gray_scale_image.blade.php

<html lang="en">
<head>
  <title>Laravel5 create and upload Grayscale Image with example - phpzone.in </title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta name="csrf-token" content="{{ csrf_token() }}">
</head>

<body>
<div class="container" style="margin: 50px;">

<h1>Laravel5 create and upload Grayscale Image </h1>


@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">
  <button type="button" class="close" data-dismiss="alert">×</button>	
    <strong>{{ $message }}</strong>
</div>


<div class="row">
  <div class="col-md-4">
    <strong>Grayscale Image:</strong>
    <br/>
    <img src="{{ asset('uploads/'.Session::get('image_name')) }}" width="500px" />
  </div>
</div>
@endif


{!! Form::open(array('route' => 'gray.scale.image','enctype' => 'multipart/form-data')) !!}
  <div class="row">
    <div class="col-md-4">
      <strong>Give a Title:</strong>
      {!! Form::text('title', null,array('class' => 'form-control','placeholder'=>'Give a title')) !!}
    </div>


    <div class="col-md-12">
      <strong>Upload Image:</strong>
      {!! Form::file('imagefile', array('class' => 'image')) !!}
    </div>


    <div class="col-md-12">
      <br/>
      <button type="submit" class="btn btn-success">Upload</button>
    </div>


  </div>
{!! Form::close() !!}


</div>


</body>
</html>

Please don’t forget to give write permission to uploads directory.

Step2: Add routes

In this you we will add routes to handle the request from web browser.

So add the following lines of code into web.php file of application’s routes directory.

Route::get('gray-scale-image', 'ImageController@grayScaleImage');
Route::post('gray-scale-image',['as'=>'gray.scale.image','uses'=>'ImageController@grayScaleImagePost']);

 

After following all the above steps you have successfully integrated create and upload grey scale image into your laravel application.