Hello Dev.
While developing image gallary utility, you want to get thumbnail or crop of images. In this article, we can going to learn how to crop image the use of jQuery croppie plugin and upload in Laravel.
So let's start the lesson...
First of all Create new Laravel project. we are able to begin with adding routes to routes/web.php file.
web.php
Route::get('image/crop', 'CroppieController@index')->name('Croppie.index');
Route::post('image/crop', 'CroppieController@submit')->name('Croppie.submit');
After that create CroppieController using below command.
php artisan make:controller CroppieController
Now open CroppieController file and add below methods.
CroppieController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CropImageController extends Controller
{
public function index()
{
return view('croppie');
}
public function submit(Request $request)
{
$image = $request->image;
list($type, $image) = explode(';', $image);
list(, $image) = explode(',', $image);
$image = base64_decode($image);
$image_name= time().'.png';
$path = public_path('uploads/'.$image_name);
file_put_contents($path, $image);
return response()->json(['status' => true]);
}
}
In the last stage, create blade file on this path resource/views/croppie.blade.php and add below code in file.
croppie.blade.php
<html lang="en">
<head>
<title>Laravel Cropping and uploading images with Croppie plugin using jQuery Ajax - meaningarticles.com </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/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>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">Cropping and uploading an image in laravel - meaningarticles.com</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4 text-center">
<div id="upload-demo"></div>
</div>
<div class="col-md-4" style="padding:5%;">
<strong>Select image to crop:</strong>
<input type="file" id="image">
<button class="btn btn-primary btn-block upload-image" style="margin-top:2%">Upload Image</button>
</div>
<div class="col-md-4">
<div id="preview-crop-image" style="background:#9d9d9d;width:300px;padding:50px 50px;height:300px;"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var resize = $('#upload-demo').croppie({
enableExif: true,
enableOrientation: true,
viewport: {
width: 200,
height: 200,
type: 'circle' //square
},
boundary: {
width: 300,
height: 300
}
});
$('#image').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
resize.croppie('bind',{
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
$('.upload-image').on('click', function (ev) {
resize.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (img) {
$.ajax({
url: "{{ route('Croppie.submit') }}",
type: "post",
data: {"image":img},
success: function (data) {
html = '<img src="' + img + '" />';
$("#preview-crop-image").html(html);
}
});
});
});
</script>
</body>
</html>
I hope it assists you, thanks for visiting my article if you like my article then share it with your friends on the social media platform.
Happy Coding.....
