Laravel JQuery Ajax Crop Image Example With Croppie Plugin

Hi Artisan

Now i am going to show you an amazing thing for web application . Now we are going to learn how to crop image before uploading to the server. If you don’t konw what is crop image just visit and read it Cropping (image)

laravel 7 crop image is the today's tutorial. You can see that many web application need user crop image before uploading it to the server. In this tutorial i will show you how we can make this laravel jquery image crop. 

To do it i will use jQuery croppie plugin. If you don't know how to crop image, don't worry. You are a right place. I will show you step by step to create crop image in laravel 7.

In this example we will use croppie plugin for crop image before upload. croppie plugin is perfect fit for profile image upload function. croppie plugin provide circle and square crop photo and several others option for settings. Let's learn how to use laravel croppie plugin example.

So you can in this tutorial, i will show you how we can crop image before upload in laravel. so let's follow bellow few step and get example

Step 1 : Create Route

In first step, we have to create new route. So for creating it go to your routes/web.phpand do as like bellow:

Route::get('crop_image', 'CropImageController@GetImageCropData');
Route::post('crop_image', 'CropImageController@FinalImageCropData');

Step 2 : Create Controller

In this step we have to create our required CropImageController.php . So go to your project root directory and run these following command.

app/Http/Controllers/ImageController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;


class ImageController extends Controller
{
   
    public function imageCrop()
    {
        return view('imageCrop');
    }

    public function imageCropPost(Request $request)
    {
        $data = $request->image;

        list($type, $data) = explode(';', $data);
        list(, $data)      = explode(',', $data);

        $data = base64_decode($data);
        $image_name= time().'.png';
        $path = public_path() . "/upload/" . $image_name;

        file_put_contents($path, $data);

        return response()->json(['success'=>'done']);
    }
}

In this Last step, we require to create imageCrop.blade.php file and we write code for crop image using croppie plugin. So you have to simply add bellow code on following path:

resources/views/imageCrop.blade.php

After followed successfully you must have to create "upload" folder with full permissions, After that you can quick run by following command: Hope it will work for you.