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.

Read Also:  How to Insert Data Into MySQL Database Table Using PHP?

Step 1: Include Bootstrap and jQuery Croppie plugin

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

Step 2: Create Image Upload and Preview HTML

<div class="container">
	<h2>Crop Image and Upload using jQuery and PHP - www.pakainfo.com</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 Profile Image:</strong>
				<br/>
				<input type="file" id="images">
				<br/>
				<button class="btn btn-success cropped_image">Upload Profile Image</button>
	  		</div>			
	  		<div class="col-md-4 crop_preview">
				<div id="upload-image-i"></div>
	  		</div>
	  	</div>
	  </div>
	</div>			
</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', {
			url: e.target.result
		}).then(function(){
			console.log('jQuery bind complete');
		});			
	}
	reader.readAsDataURL(this.files[0]);
});

upload.php

$('.cropped_image').on('click', function (ev) {
	$image_crop.croppie('result', {
		type: 'canvas',
		size: 'viewport'
	}).then(function (response) {
		$.ajax({
			url: "http://www.pakainfo.com/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);
			}
		});
	});
});

Step 4: Upload Image on Server After Crop

<?php
$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 infinityknow.com 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.

Read Also:  PHP Array to JSON Array using laravel blade with @json

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  How to Get Current Date & Time in JavaScript
  2. Read Also:  woocommerce get attributes list by product id
  3. Read Also:  Add prefix in each key of PHP Array
  4. Read Also:  Show Multiple Checkbox Checked With Multiple Array Using Php
  5. Read Also:  FIX 500 internal server error laravel
  6. Read Also:  Refresh a HTML div without page load AJAX
  7. Read Also:  Laravel Replicate Copy Table Row Examples
  8. Read Also:  Laravel Ajax Upload file image without submitting form
  9. Read Also:  Refresh a HTML div without page load AJAX
  10. Read Also:  How to Insert Data Into MySQL Database Table Using PHP?