Image Crop and Upload using JQuery with PHP Ajax

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  Youtube Playlist Search Application in Javascript using Youtube Data API V3

 

<!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  BootBoxJS - Bootstrap Modals Library For Creating Beautiful Bootstrap Modals

 

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  Add Instagram Photos To Your Website Without API - jQuery instagramFeed - 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" />';
}

?>

Leave a Reply

Close Menu