Crop And Upload Image In JQuery With PHP. Crop image before upload.

Related Articles

Do you already know how to crop and save an image using JQuery and PHP. In this post we will discuss how to crop an image using the JQuery Croppie plugin. We will also upload the cropped image with JQuery, Ajax and PHP. Image cropping is required as a feature when adding an image, because a person adds any length of image to a site, however we need to increase certain constant height and width of the image so that at this point if we have an offer to crop an image the feature uses then he or she can add the required image length To our server.

The JQuery Croppie plugin is a fast and easy to use image cropping plugin with many configuration options. This is an HTML5-based image-cutting library on canvas. This plugin was initialized using croppie (). By this approach, we can also sketch a selection according to our requirement. There are two types of image cropping available in this plugin. The first type is a circle and the second is a square. By using a circle we can crop an image in a circle. By using a square we can also cut a square length. In this approach, we can also plot width and height. We will send an image in base64 format and this image format will be sent to a php script using Ajax. In PHP script we have use of the file_put_contents () function, this function will create a cropping image under our work folder.

Here are the steps for implementing image cropping in JQuery and PHP.

Step 1. Create an index.php file.
    <title>Crop And Upload Image In JQuery With PHP</title>  
    <script src=""></script>  
    <script src=""></script>
    <script src=""></script>
    <link rel="stylesheet" href="" />
    <link rel="stylesheet" href="" />
      <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  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 class="panel-footer"> <button class="btn btn-success crop_image">Crop & Upload Image</button></div>           


 $image_crop = $('#image_demo').croppie(
    enableExif: true,
      type:'circle' //circle

  $('#upload_image').on('change', function()
    var reader = new FileReader();
    reader.onload = function (event) 

      type: 'canvas',
      size: 'viewport'
        type: "POST",
        data:"image": response,


Step 2. Create an upload.php file.


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


Endless scrolling using PHP and JQuery. Multi-step form with a progress bar using jQuery.



Please enter your comment!
Please enter your name here

Popular Articles