Raviya Technical
Published in

Raviya Technical

Laravel with Packages | Laravel — Ajax crop image before upload using croppie plugin

In this article, I will let you know the jquery ajax crop image before uploading using the croppie plugin in laravel 5, laravel 6, laravel 7, laravel 8, and laravel 9 applications.

After several feedback and request from viewers for the post of the laravel 5 crop image upload example, I decided to find a good plugin and post for the ajax crop image in the 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 a demo, etc. in today we almost require image upload for profile or product, etc. So it would always be perfect if you do something best using the bootstrap jquery plugin.

In this example, we will use the crappie plugin for crop images before uploading. crappie plugin is a perfect fit for the profile image upload function. crappie plugin provides circle and square crop photos and several other options for settings.

So, after you followed all steps you will get the layout as below, so let’s follow the below step and get an example:

Layout:

Step 1: Add New Routes

In the first step, we will add two new routes to our laravel application. So you have to add “image-crop[GET]” and “image-crop[POST]” routes in the web.php file as below:

routes/web.php

Route::get('image-crop', 'ImageController@imageCrop');
Route::post('image-crop', 'ImageController@imageCropPost');

Step 2: Create New Controller

In a second step, we will create a new ImageController for two new route request methods. In this controller we will add two method image crop() and imageCropPost(). So you have to simply get the below code and put it 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']);
}
}

Step 3: Create New View File

In this last step, we require to create an imageCrop.blade.php file and we write code for the cropped image using the crappie plugin. So you have to simply add the below code on the following path:

resources/views/imageCrop.blade.php

<html lang="en">
<head>
<title>Laravel - jquery ajax crop image before upload using croppie plugins</title>
<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
<script src="http://demo.itsolutionstuff.com/plugin/croppie.js"></script>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/croppie.css">
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Laravel crop image before upload using croppie plugins</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4 text-center">
<div id="upload-demo" style="width:350px"></div>
</div>
<div class="col-md-4" style="padding-top:30px;">
<strong>Select Image:</strong>
<br/>
<input type="file" id="upload">
<br/>
<button class="btn btn-success upload-result">Upload Image</button>
</div>
<div class="col-md-4" style="">
<div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$uploadCrop = $('#upload-demo').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$('#upload').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
$.ajax({
url: "/image-crop",
type: "POST",
data: {"image":resp},
success: function (data) {
html = '<img src="' + resp + '" />';
$("#upload-demo-i").html(html);
}
});
});
});
</script></body>
</html>

After following successfully you must have to create an “upload” folder with full permissions, After that, you can quickly run the following command:

php artisan serve

Now you can open the be URL url on your browser:

http://localhost:8000/image-crop

I hope it can help you...

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store