Home Ajax How to crop image before upload by using croppie plugin?

How to crop image before upload by using croppie plugin?

by Shahriar Sagor

Today now in this post i will show you How to crop image before upload by using croppie plugin? we are mostly need to crop the image before upload and as specially said that when we save any image for user profile or etc. Now In this post i will tell you how to crop the image and save by using jquery ajax.

So in this example i will use the croppie plugin that is provide us to crop image also with zoom and etc. croppie.js plugin is a very professional and good on that way we can easily for use the crop profile image.

Now in the bellow example through we can implement this easily with php and jquery. Now it is very pretty simple example for the upload crop and save image php by using croppie.js plugin.

We need to create two different file and one for upload directory for store crop image as like as bellow:




Now here is an example for php upload profile picture crop.

<html lang="en">
  <title>PHP - jquery ajax crop image before upload using croppie plugins</title>
<script src="../plugin/jquery.js"></script>
  <script src="../plugin/croppie.js"></script>
  <link rel="stylesheet" href="../plugin/bootstrap-3.min.css">
  <link rel="stylesheet" href="../plugin/croppie.css"></head>
<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';

Read Also : Laravel 8 Mobile Number Verification Tutorial

Thanks for read. I hope it help you. For more you can follow us on facebook


You may also like