Crop Image and Save into Database using PHP with Ajax

Brijpal Sharma
php ajax Publish on:-December 05th, 2018 , Category:- Web Development

Today we learn how to Crop Image and Save into Database using PHP with Ajax

In this post, we learn how to Crop Image and Save into Database using PHP with Ajax.

In this blog post, you can learn Crop Image and Save into Database using PHP with Ajax and javascript and then after that cropped image stored into MySQL database in Base 64 format. In this application, we will some Bootstrap code for modal.

To store the image in the database rather than the public folder or asset folder is benefits are image has been load faster than image load from the folder. the second advantage to store the image in the database is not cached in the browser and many other advantages to storing the image in the database.

The many rich text box editor is also converting uploaded image into a base64 format and then store into database.

Now we have seen the all process of crop image and store into MySQL database step by step. first, we need to the select an image, then Croppie plugin has been initializing, and by using this plugin we can zoom the image, and as per our requirement, we can crop the image.

First, create a database table to store image

CREATE TABLE `tbl_images` (
  `id` int(11) NOT NULL,
  `images` bigint NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Column name image where we store image storage type should be Bigint. Because of the size of the converted image in the base64 format length is too long.

Create an Index.php page

<html> 
  <head> 
    
<title>Crop Image and Save into Database using PHP with Ajax</title> 
 
<script
 src=//code.jquery.com/jquery-3.3.1.min.js
 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 crossorigin=anonymous></script>

 <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin=anonymous>

<script src=//cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.js></script>

 <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css" />

  </head> 
  <body> 
    <div >
     <br />
   <h3 align=center> Crop Image and Save into Database using PHP with Ajax</h3>
   <br />
   <br />
  <div >
   <div >Select Profile Image</div>
   <div align=center>
    <input type=file name=insert_image id="insert_image" accept="image/*" />
    <br />
    <div id="store_image"></div>
   </div>
   </div>
  </div>
  </body> 
</html>

<div id="insertimageModal" role="dialog">
 <div >
 <div >
   <div >
    <button type=button data-dismiss="modal">&times;</button>
    <h4 >Crop & Insert Image</h4>
   </div>
   <div >
    <div >
     <div >
      <div id="image_demo" ></div>
     </div>
     <div >
    <br />
    <br />
    <br/>
      <button >Crop & Insert Image</button>
     </div>
    </div>
   </div>
   <div >
    <button type=button 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
  }  
 });

 $('#insert_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]);
  $('#insertimageModal').modal('show');
 });

 $('.crop_image').click(function(event){
  $image_crop.croppie('result', {
   type: 'canvas',
   size: 'viewport'
  }).then(function(response){
   $.ajax({
    url:'insert.php',
    type:'POST',
    data:{"image":response},
    success:function(data){
     $('#insertimageModal').modal('hide');
     load_images();
     alert(data);
    }
   })
  });
 });

 load_images();

 function load_images()
 {
  $.ajax({
   url:"fetch_images.php",
   success:function(data)
   {
    $('#store_image').html(data);
   }
  })
 }

}); 
</script>

Create another file database_connection.php

Create a new database_connection.php file for connection with the database. In my case database name is cropImage and username is root and password are blank.

<?php
$connect = new PDO("mysql:host=localhost;dbname=cropImage", "root", "");
?>

Create a file insert.php

Here we create a new file for data insert into the database. In this file, we receive an image and store in the database in the base64 format.

<?php

//insert.php

if(isset($_POST["image"]))
{
 include('database_connection.php');

 $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);

 $image_file = addslashes(file_get_contents($imageName));

 $query = "INSERT INTO tbl_images(images) VALUES ('".$image_file."')";

 $statement = $connect->prepare($query);

 if($statement->execute())
 {
  echo 'Image save into database';
  unlink($imageName);
 }

}

?>

fetch_images.php

After saving data(Image) into the database we need to display on the page to create a new file fetch_image.php

<?php

//fetch_images.php

include('database_connection.php');

$query = "SELECT * FROM tbl_images ORDER BY image_id DESC";

$statement = $connect->prepare($query);

$output = '<div >';

if($statement->execute())
{
 $result = $statement->fetchAll();

 foreach($result as $row)
 {
 $output .= '
 <div >
  <img src=data:image/png;base64,'.base64_encode($row['images']).' />
 </div>
 ';
 }
}

$output .= '</div>';

echo $output;

?>

So here over our post for Crop Image and Save into Database using PHP with Ajax

Brijpal Sharma

Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...

2 Comments

zafar
Publish on:-July 30th, 2019
hello sir image save in database correct but how the image save in folder please reply

Benson Narankaik
Publish on:-October 06th, 2019
Hello Zafar, I can help you here... look at this <i>insert.php</i> file on line <b>30</b> there is "unlink($imageName);" <?php //insert.php if(isset($_POST["image"])) { include('database_connection.php'); $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); $image_file = addslashes(file_get_contents($imageName)); $query = "INSERT INTO tbl_images(images) VALUES ('".$image_file."')"; $statement = $connect->prepare($query); if($statement->execute()) { echo 'Image save into database'; unlink($imageName); //the image is uploaded to the same folder but this unlink code deletes it } } ?> The image is uploaded after being cropped. It is saved to the same folder as this 'insert.php' script. So if you want this image to remain in the folder, comment line 30 //unlink($imageName);

You must be logged in to post a comment.