How to crop image before upload by using croppie plugin?

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:

index.php

ajaxpro.php

upload(Directory)

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

index.php
<html lang="en">
<head>
  <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>
<body>
<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>
	  		<div class="col-md-4" style="padding-top:30px;">
				<strong>Select Image:</strong>
				<br/>
				<input type="file" id="upload">
				<br/>
				<button class="btn btn-success upload-result">Upload Image</button>
	  		</div>
	  		<div class="col-md-4" 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">
$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: "/ajaxpro.php",
			type: "POST",
			data: {"image":resp},
			success: function (data) {
				html = '<img src="' + resp + '" />';
				$("#upload-demo-i").html(html);
			}
		});
	});
});


</script>


</body>
</html>

ajaxpro.php

$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

Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.