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

Step 2: Create Image Upload and Preview HTML

	
Crop Image and Upload using jQuery and PHP - www.pakainfo.com
	
	

	  

	  	

	  		

				

	  		
	  		

				Select Profile Image:
				

				
				

				Upload Profile Image
	  		
			
	  		

				

	  		
	  	
	  
	
			

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 = '';
				$("#upload-image-i").html(html);
			}
		});
	});
});

Step 4: Upload Image on Server After Crop

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.