Tuesday, 27 March 2018

Image Crop and Upload using JQuery with PHP Ajax


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">&times;</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" />';
}

?>





3 comments:

  1. Does this plug-in have the option to rotate the image or correct its orientation?

    ReplyDelete
  2. Can you make a angular cropper

    ReplyDelete
  3. how 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..

    ReplyDelete