Image Crop and Upload using jQuery and PHP

Today, We want to share with you crop image while uploading with jquery.In this post we will show you jquery crop and resize image before upload, hear for image crop and uploading using jquery with php ajax we will give you demo and example for implement.In this post, we will learn about PHP Crop Resize Image While Uploading Using Jquery Plugin with an example.

crop image while uploading with jquery

here in this Example You learn All About Example of jquery crop image before upload, jquery image cropping and resizing, crop and save image using jquery and php, upload and resize image jquery, bootstrap image crop and upload with demo and full source code.

Step 1: Include Bootstrap and jQuery Croppie plugin

<script src=""></script>
<script src="croppie/croppie.js"></script>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="croppie/croppie.css">
<script type="text/javascript" src="upload.js"></script>
<link rel="stylesheet" href="style.css">

Step 2: Create Image Upload and Preview HTML

<div class="container">
	<h2>Crop Image and Upload using jQuery and PHP -</h2>	
	<div class="panel panel-default">
	  <div class="panel-body">
	  	<div class="row">
	  		<div class="col-md-4 text-center">
				<div id="upload-image"></div>
	  		<div class="col-md-4">
				<strong>Select Profile Image:</strong>
				<input type="file" id="images">
				<button class="btn btn-success cropped_image">Upload Profile Image</button>
	  		<div class="col-md-4 crop_preview">
				<div id="upload-image-i"></div>

Step 3: Implement Image Crop and Upload

$image_crop = $('#upload-image').croppie({
	enableExif: true,
	viewport: {
		width: 400,
		height: 400,
		type: 'square'
	boundary: {
		width: 600,
		height: 600
$('#images').on('change', function () { 
	var reader = new FileReader();
	reader.onload = function (e) {
		$image_crop.croppie('bind', {
			console.log('jQuery bind complete');


$('.cropped_image').on('click', function (ev) {
	$image_crop.croppie('result', {
		type: 'canvas',
		size: 'viewport'
	}).then(function (response) {
			url: "",
			type: "POST",
			data: {"image":response},
			success: function (data) {
				html = '<img src="' + response + '" />';

Step 4: Upload Image on Server After Crop

$resize_user_friendly_img = $_POST['image'];
list($type, $resize_user_friendly_img) = explode(';', $resize_user_friendly_img);
list(, $resize_user_friendly_img)      = explode(',', $resize_user_friendly_img);
$resize_user_friendly_img = base64_decode($resize_user_friendly_img);
$image_name = time().'.png';
//here simple upload cropped image to server side using file_put_contents
file_put_contents('upload/'.$image_name, $resize_user_friendly_img);
echo 'Cropped image uploaded successfully.';

I hope you get an idea about image uploading and cropping jquery.
I would like to have feedback on my blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.