Image Crop and Upload using JQuery with PHP Ajax

Welcome folks I am back with another blog post. In this post we will be Doing Image Crop and Upload using jQuery with PHP and AJAX. Image Crop is the most important part in every modern web application. In this post we will be implementing this feature in the following steps.

Make a new index.html file and copy paste the below code. In this code we have just a Image upload button.

READ How to implement Facebook Login in Javascript using Facebook SDK & Graph API

<!DOCTYPE html>
<html>
<head>
<title>Image Crop</title>
<link rel="stylesheet" href="croppie.css"/>
</head>
<body>
<body>  
   <div class="container">
      <br>
      <h3 align="center">Image Crop and Upload using Jquery with Php and Ajax</h3>
      <br>
      <br>
      <p style="text-align:center;">Select Profile Image</p>
     <input type="file" name="upload_image" id="upload_image" accept="image/*">
      <div id="uploadimage">
      </div>
      <button class="crop_image">Crop and Upload Image</button>
      <div id="uploaded_image"></div>
   </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="croppie.min.js"></script>
<script src="script.js"></script>
</html>

For this we are using the croppie library for cropping images so download this library from here

READ Build a Video Converter Application in Node.js Using Fluent-FFmpeg Library Full Example

Make a new script.js file for the javascript

$(document).ready(function(){

    $(".crop_image").hide();

    $image_crop = $('#uploadimage').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]);
       $(".crop_image").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);
             $('.crop_image').hide();
           }
         });
       })
     });
   
   });

READ Firebase Authentication in Twitter using Javascript - Coding Shiksha

Make a new upload.php file. This php script will actually take the cropped image and upload it to the server.

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

?>