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

?>





32 comments:

  1. nice tutorial, keep it going.

    ReplyDelete
  2. Thanks for the tutorial ..
    I would like to know how to save the cropped image file into server folder ..
    Thanks for the reply

    ReplyDelete
  3. getting console error Uncaught TypeError: $(...).croppie is not a function

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

    ReplyDelete
    Replies
    1. yes need this answer too did anyone try this

      Delete
  5. Can you make a angular cropper

    ReplyDelete
  6. 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
  7. this 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

    ReplyDelete
  8. how do i upload multiple images using croppie ?

    ReplyDelete
  9. how can we crop the image with preserveAspectRatio

    ReplyDelete
  10. Excelent solution. But how can I rotate the image or correct its orientation when I selected?

    ReplyDelete
  11. image not uploading on folder using Codeigniter

    ReplyDelete
  12. how to download croppie plugin

    ReplyDelete
  13. Hello! 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

    ReplyDelete
  14. hi
    thank you for this lesson
    but
    can you tell me how to use that into oop mysqli php

    ReplyDelete
  15. how to put result file in custom folder. example . assets/images/..

    ReplyDelete
    Replies
    1. file_put_contents("uploads/".$imageName, $data);

      Delete
  16. After croppie i can't submit the form can you help me

    ReplyDelete
  17. why the image files are converting into .png format

    ReplyDelete
  18. why the images are coverted into .png format

    ReplyDelete
    Replies
    1. The image format is set default to png. You can pass the uploaded inage format as data parameter.

      Delete
  19. How can i put this image in particular folder

    ReplyDelete