PHP & Ajax - Crop and Resize Image before Upload

Learn how to resize image in php while uploading using croppie js jquery ajax. You can easily ajax crop image and save using php in just 3 minutes. You will find full script of php ajax crop image before upload without page refresh.

[satyasanatan]

Use size "Original" instead of "Viewport" and the image becomes 6-7 times larger than the original. Instead, it should be compressed. Can you do that? That's because viewport decreases image quality badly.

[studiosecond]

There is a small mistake in the JavaScript code and it won't work for the same reason. I have corrected the code and pasting it here, so anyone can use it.


<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');
});

}

});


$('.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 + '" />';

}
});
});
});


</script>

[satishksharma]

I request to you please make a same video with cropper.js for cropping and use blob instead base64 if possible.

[pervaizahmed]

I try copy past but not work after crop

[raffademello]

414 error URI too long (image base64 format) how to resolve this ?

[granitoide]

Not make a upload in this folder, only show png data