6.4 C
New York
Friday, March 1, 2024

PHP – jquery ajax crop image before upload using croppie plugin

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="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">



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

url: e.target.result


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.

Related Articles

Latest Articles