Image Crop and Upload using jQuery and PHP

Image upload and Crop is an important feature of web applications to allow users to crop the image to desired size before upload. This feature is generally implemented in user’s section to manage user profile to upload user avatar or profile photo after image crop to fit correctly to display in user profile. The functionality can be implement any where with image upload in web applications

As in our previous tutorial you have learned how to upload images with jQuery, PHP and MySQL. In this tutorial you will learn how to crop image before upload using jQuery and PHP.

We will use Croppie jQuery plugin that enables to crop the image with zoom.

We will cover this tutorial step by step with live demp to browse ithe mage and display to crop with zoom feature and upload after image crop.

Also, read:

• Multiple Image Upload with jQuery, PHP and MySQL
• Build Dynamic Image Gallery with PHP & MySQL

So let’s start the coding for image crop before upload example using jQuery and PHP. We will have following file structure for this example.

• index.php
• upload.php
• upload.js

Step1: Include Bootstrap and jQuery Croppie plugin

As we are going to handle design using Bootstrap and jQuery Croppie plugin, so we will include related files in index.php. We will also include upload.js in which handle plugin functions to crop image and save on server.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="croppie/croppie.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="croppie/croppie.css">
<script type="text/javascript" src="upload.js"></script>
<link rel="stylesheet" href="style.css">

Step2: Create Image Upload and Preview HTML

In index.php, we will create HTML for image upload and image preview.

<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>
	  		<div class="col-md-4">
				<strong>Select Image:</strong>
				<br/>
				<input type="file" id="images">
				<br/>
				<button class="btn btn-success cropped_image">Upload Image</button>
	  		</div>			
	  		<div class="col-md-4 crop_preview">
				<div id="upload-image-i"></div>
	  		</div>
	  	</div>
	  </div>
	</div>			
</div>

Step3: Implement Image Crop and Upload

Now in upload.js, we will handle image crop functionality using croppie plugin function.

$image_crop = $('#upload-image').croppie({
	enableExif: true,
	viewport: {
		width: 200,
		height: 200,
		type: 'square'
	},
	boundary: {
		width: 300,
		height: 300
	}
});
$('#images').on('change', function () { 
	var reader = new FileReader();
	reader.onload = function (e) {
		$image_crop.croppie('bind', {
			url: e.target.result
		}).then(function(){
			console.log('jQuery bind complete');
		});			
	}
	reader.readAsDataURL(this.files[0]);
});

After image crop, we will upload cropped image to server by calling upload.php when click on upload image.

$('.cropped_image').on('click', function (ev) {
	$image_crop.croppie('result', {
		type: 'canvas',
		size: 'viewport'
	}).then(function (response) {
		$.ajax({
			url: "http://localhost/coderszine/crop-image-and-upload-using-jquery-and-php/upload.php",
			type: "POST",
			data: {"image":response},
			success: function (data) {
				html = '<img src="' + response + '" />';
				$("#upload-image-i").html(html);
			}
		});
	});
});	

Step4: Upload Image on Server After Crop

Finally in upload.php, we will implement functionality to upload cropped image on server.

<?php
$croped_image = $_POST['image'];
list($type, $croped_image) = explode(';', $croped_image);
list(, $croped_image)      = explode(',', $croped_image);
$croped_image = base64_decode($croped_image);
$image_name = time().'.png';
// upload cropped image to server 
file_put_contents('upload/'.$image_name, $croped_image);
echo 'Cropped image uploaded successfully.';
?>

You may also like:

• Follow and Unfollow System with PHP & MySQL
• GST Billing System with PHP & MySQL
• Restaurant Management System with PHP & MySQL
• Visitor Management System with PHP & MySQL
• Student Attendance System with PHP & MySQL
• Like and Dislike System with Ajax, PHP & MySQL
• Build Star Rating System with jQuery, PHP & MySQL
• User Registration and Login System with PHP & MySQL
• Build Contact Form with PHP and Ajax
• To-do List Application with Ajax, PHP & MySQL
• Build Event Calendar with jQuery , PHP & MySQL
• Create Dynamic Bar Chart with JavaScript, PHP & MySQL

You can view the live demo from the Demo link and can download the source from the Download link below.
Demo Download