Do you already know How to Crop and Save Image the use of JQuery and PHP. In this post we will discuss, how to crop image with the help of JQuery Croppie plugin. We will also upload the cropped image with the help of JQuery, Ajax and PHP. Image Crop is needed characteristic whilst add of picture, due to the fact person add any length of picture to website, however we need to upload certain fixed height and width of picture, so at that point if we’ve got offer image crop characteristic to user then he or she can add required length of image to our server.
JQuery Croppie plugin is a fast, easy to use image cropping plugin with many configuration options. It is an Html5 canvas based image cropping library. This plugin has been initialized by using croppie(). Under this approach, we also can outline choice as in line with our requirement. There are two types of image crop available in this plugin. First kind is circle and other is square. By using of circle we are able to crop photo in circle. By using square we are able to crop in square length also. In this approach, we also can outline width and height also. We 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.
Below are the steps to implement image crop in JQuery and PHP.
Step 1. Create index.php file.
<html>
<head>
<title>Crop And Upload Image In JQuery With PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" />
</head>
<body>
<div class="container">
<h3 align="center">Crop And Upload Image In JQuery With PHP</h3>
<div class="panel panel-primary">
<div class="panel-heading">Select Image</div>
<div class="panel-body" align="center">
<input type="file" name="upload_image" id="upload_image" />
</div>
</div>
</div>
<div id="uploadimage" style='display:none' class="container">
<div class="panel panel-primary">
<div class="panel-heading">Upload & Crop Image</div>
<div class="panel-body" align="center">
<div id="image_demo" style="width:350px; margin-top:30px"></div>
<div id="uploaded_image" style="width:350px; margin-top:30px;"></div>
</div>
<div class="panel-footer"> <button class="btn btn-success crop_image">Crop & Upload Image</button></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:200,
height:200,
type:'circle' //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
})
}
reader.readAsDataURL(this.files[0]);
$('#uploadimage').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)
{
$('#uploaded_image').html(data)
}
});
})
});
});
</script>
Step 2. Create upload.php file.
<?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" />';
}
?>
Infinite Scroll Pagination Using PHP And JQuery. Multi Step Form with Progress Bar Using jQuery.