PHP - jquery ajax crop image before upload using croppie plugin

By Hardik Savani | August 6, 2016 | Category : PHP Javascript Bootstrap jQuery

we mostly need to crop image before upload and as specially when we save image for user profile or etc. In this post i tell you how to crop image and save using jquery ajax.

In this example i use croppie plugin that provide to crop image with zoom and etc. croppie.js plugin is very professional that way we can easily use for crop profile image.

Bellow example through you can implement easily with php and jquery. It is pretty simple example for upload crop and save image php using croppie.js plugin.

You have to create two file and one upload directory for store crop image like as bellow:




here is example for php upload profile picture crop.

So, let's see example and demo too.



<html lang="en">


<title>PHP - jquery ajax crop image before upload using croppie plugins</title>

<script src=""></script>

<script src=""></script>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">



<div class="container">

<div class="panel panel-default">

<div class="panel-heading">Image Upluad</div>

<div class="panel-body">

<div class="row">

<div class="col-md-4 text-center">

<div id="upload-demo" style="width:350px"></div>


<div class="col-md-4" style="padding-top:30px;">

<strong>Select Image:</strong>


<input type="file" id="upload">


<button class="btn btn-success upload-result">Upload Image</button>


<div class="col-md-4" style="">

<div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"></div>






<script type="text/javascript">

$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', {



console.log('jQuery bind complete');





$('.upload-result').on('click', function (ev) {

$uploadCrop.croppie('result', {

type: 'canvas',

size: 'viewport'

}).then(function (resp) {


url: "/ajaxpro.php",

type: "POST",

data: {"image":resp},

success: function (data) {

html = '<img src="' + resp + '" />';










$data = $_POST['image'];

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

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

$data = base64_decode($data);

$imageName = time().'.png';

file_put_contents('upload/'.$imageName, $data);

echo 'done';

you can get more information about croppie.js plugin from here : Click Here.

Watch Online Video:

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: