Do you know How to Crop and Save Image using Jquery and PHP. For this we here we have disucuss topic like How to Crop Image while uploading by using Jquery with PHP Ajax. Here we have use JQuery Croppie plugin for Image crop with PHP Script. Image Crop is required feature while upload of image, because user upload any size of image to website, but we want to required to upload same height and width image, so at that time if we have provide image crop feature to user then he can upload same size of crop image to our web site and we can received same size of all image. This type of mostly required at the time of upload of profile image.
We have already publish many web tutorial on image upload by using PHP with Ajax. How to upload image without submit of form. But we have not covered any topic on how to crop image at the time of upload of image by using JQuery with PHP Script. But now in this web tutorial we have covered this things and for this feature we have use Jquery Croppie plugin. This is a simple javascript Image cropper. You can easily implement this plugin in your web project and this plugin is required less code for image crop feature. This plugin also provide functionality like image zoom also. So, we can also crop image by image zooming also. There are many other Jquery plugin available by they all are very complex to use but this is very easy to understand and we can easily implement with our web application.
In this tutorial we have use Bootstrap Modal for Image crop by using JQuery Croppie plugin. This plugin has been initialize by using croppie(). Under this method we can also define option as per our requirement. In this plugin there two type of image crop available. First type is circle, by using circle type we can crop image in circle and other is square that means we can crop in square size also. In this method we can also define width and height also. After this we want to write jquery code on image select by using file tag. In this event we want to activate croppie plugin on selected image and bootstrap modal will be pop up with croppie plugin and there we can crop image by click on image crop and upload button. When we have click on button then this plugin will send image in base64 format and this image format we will send to php script by using Ajax. In PHP script we have use file_put_contents() function, this function will create crop image under our working folder. This is complete discussion of Live Image crop and upload by using JQuery Croppie plugin with PHP script with Ajax.
Source Code
index.php
<html>
<head>
<title>Make Price Range Slider using JQuery with PHP Ajax</title>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="croppie.js"></script>
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="croppie.css" />
</head>
<body>
<div class="container">
<br />
<h3 align="center">Image Crop & Upload using JQuery with PHP Ajax</h3>
<br />
<br />
<div class="panel panel-default">
<div class="panel-heading">Select Profile Image</div>
<div class="panel-body" align="center">
<input type="file" name="upload_image" id="upload_image" accept="image/*" />
<br />
<div id="uploaded_image"></div>
</div>
</div>
</div>
</body>
</html>
<div id="uploadimageModal" class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Upload & Crop Image</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8 text-center">
<div id="image_demo" style="width:350px; margin-top:30px"></div>
</div>
<div class="col-md-4" style="padding-top:30px;">
<br />
<br />
<br/>
<button class="btn btn-success crop_image">Crop & Upload Image</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:200,
height:200,
type:'square' //circle
},
boundary:{
width:300,
height:300
}
});
$('#upload_image').on('change', function(){
var reader = new FileReader();
reader.onload = function (event) {
$image_crop.croppie('bind', {
url: event.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
$('#uploadimageModal').modal('show');
});
$('.crop_image').click(function(event){
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:"upload.php",
type: "POST",
data:{"image": response},
success:function(data)
{
$('#uploadimageModal').modal('hide');
$('#uploaded_image').html(data);
}
});
})
});
});
</script>
upload.php
<?php
//upload.php
if(isset($_POST["image"]))
{
$data = $_POST["image"];
$image_array_1 = explode(";", $data);
$image_array_2 = explode(",", $image_array_1[1]);
$data = base64_decode($image_array_2[1]);
$imageName = time() . '.png';
file_put_contents($imageName, $data);
echo '<img src="'.$imageName.'" class="img-thumbnail" />';
}
?>
This is Nice code, thanks sir
ReplyDeleteThank you very nice tutorials
ReplyDeletenice tutorial, keep it going.
ReplyDeleteThx its helpful
ReplyDeleteThanks for the tutorial ..
ReplyDeleteI would like to know how to save the cropped image file into server folder ..
Thanks for the reply
getting console error Uncaught TypeError: $(...).croppie is not a function
ReplyDeletemerci ;)
ReplyDeleteDoes this plug-in have the option to rotate the image or correct its orientation?
ReplyDeleteyes need this answer too did anyone try this
DeleteCan you make a angular cropper
ReplyDeletehow to directly save the crop image into the database? I am trying to update the profile photo and save it into the database. Please help..
ReplyDeletethis is perfect no doubt but can u suggest me if i want to upload multiple images with using this croppie then how can i do it
ReplyDeleteit's working at 100%.
ReplyDeletehow do i upload multiple images using croppie ?
ReplyDeletezip file not opening
ReplyDeleteyes
Delete:)
Deletehow can we crop the image with preserveAspectRatio
ReplyDeletewhy the file cannot open ?
ReplyDeleteExcelent solution. But how can I rotate the image or correct its orientation when I selected?
ReplyDeletedownloaded file is damage.
ReplyDeleteimage not uploading on folder using Codeigniter
ReplyDeletehow to download croppie plugin
ReplyDeleteHello! First of all congratulation, it's a wonderful plugin! I want to add it within a page but adding bootstrap is causing a lot of formatting problems. For example the page already uses jMenu, a jquery plugin, and both bootstrap both jmenu define nav class. Have you please any suggestion? Thanks a lot in advance
ReplyDeletehi
ReplyDeletethank you for this lesson
but
can you tell me how to use that into oop mysqli php
how to put result file in custom folder. example . assets/images/..
ReplyDeletefile_put_contents("uploads/".$imageName, $data);
DeleteAfter croppie i can't submit the form can you help me
ReplyDeletewhy the image files are converting into .png format
ReplyDeletewhy the images are coverted into .png format
ReplyDeleteThe image format is set default to png. You can pass the uploaded inage format as data parameter.
DeleteHow can i put this image in particular folder
ReplyDelete