Laravel – Ajax crop image before upload using using croppie plugin
In this post we will give you information about Laravel – Ajax crop image before upload using using croppie plugin. Hear we will give you detail about Laravel – Ajax crop image before upload using using croppie pluginAnd how to use it also give you demo for it if it is necessary.
In this article i will let you know jquery ajax crop image before upload using croppie plugin in Laravel 5 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:
routes/web.php
Route::get('image-crop', 'ImageController@imageCrop');
Route::post('image-crop', 'ImageController@imageCropPost');
Step 2: Create New Controller
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
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
class ImageController extends Controller
{
/**
* Show the application dashboard.
*
* @return IlluminateHttpResponse
*/
public function imageCrop()
{
return view('imageCrop');
}
/**
* Show the application dashboard.
*
* @return IlluminateHttpResponse
*/
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 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
<html lang="en">
<head>
<title>Laravel - jquery ajax crop image before upload using croppie plugins</title>
<script src="http://demo.onlinecode/plugin/jquery.js"></script>
<script src="http://demo.onlinecode/plugin/croppie.js"></script>
<link rel="stylesheet" href="http://demo.onlinecode/plugin/bootstrap-3.min.css">
<link rel="stylesheet" href="http://demo.onlinecode/plugin/croppie.css">
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div >
<div >
<div >Laravel crop image before upload using croppie plugins</div>
<div >
<div >
<div >
<div id="upload-demo" style="width:350px"></div>
</div>
<div style="padding-top:30px;">
<strong>Select Image:</strong>
<br/>
<input type="file" id="upload">
<br/>
<button >Upload Image</button>
</div>
<div 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 followed successfully you must have to create “upload” folder with full permissions, After that you can quick run by following command:
php artisan serve
Now you can open bellow url on your browser:
http://localhost:8000/image-crop
I hope it can help you…
Hope this code and post will helped you for implement Laravel – Ajax crop image before upload using using croppie plugin. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs