Laravel - Ajax crop image before upload using using croppie plugin
By Hardik Savani June 24, 2017 Category : PHP Laravel Bootstrap jQuery AjaxPauseUnmuteLoaded: 3.10%FullscreenIn this article i will let you know jquery ajax crop image before upload using croppie plugin in laravel 5, laravel 6, laravel 7, laravel 8 and laravel 9 application.
After several feedback and request from viewer for post of laravel 5 crop image upload example, i decide to find good plugin and post for ajax crop image in laravel 5 application, Last few days ago i already posted for image uploading with laravel like Ajax Image Upload Example With Validation in Laravel, Laravel 5 multiple images uploading using dropzone js example with demo etc. in todays we almost require image upload for profile or product etc. So it would always perfect if you do something best using bootstrap jquery plugin.
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.
So, after you followed all step you will get layout as like bellow, so let's follow bellow step and got example:
Layout:
Step 1: Add New Routes
In first step, we will add two new routes in our laravel application. So you have to add "image-crop[GET]" and "image-crop[POST]" routes in web.php file as like bellow:
In second step we will create new ImageController for two new routes request method. In this controller we will add two method imageCrop() and imageCropPost(). So you have to simply get bellow code and put on your controller:
app/Http/Controllers/ImageController.php
<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;class ImageController extends Controller{ /** * Show the application dashboard. * * @return \Illuminate\Http\Response */ public function imageCrop() { return view('imageCrop'); } /** * Show the application dashboard. * * @return \Illuminate\Http\Response */ 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:
