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. 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 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. 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. After saving data(Image) into the database we need to display on the page to create a new file fetch_image.php So here over our post for Crop Image and Save into Database using PHP with Ajax 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;
Create an Index.php page
<html>
<head>
<title>Crop Image and Save into Database using PHP with Ajax</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css" />
</head>
<body>
<div class="container">
<br />
<h3 align="center"> Crop Image and Save into Database using PHP with 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="insert_image" id="insert_image" accept="image/*" />
<br />
<div id="store_image"></div>
</div>
</div>
</div>
</body>
</html>
<div id="insertimageModal" class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Crop & Insert 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 & Insert 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
}
});
$('#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
<?php
$connect = new PDO("mysql:host=localhost;dbname=cropImage", "root", "");
?>Create a file insert.php
<?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
<?php
//fetch_images.php
include('database_connection.php');
$query = "SELECT * FROM tbl_images ORDER BY image_id DESC";
$statement = $connect->prepare($query);
$output = '<div class="row">';
if($statement->execute())
{
$result = $statement->fetchAll();
foreach($result as $row)
{
$output .= '
<div class="col-md-2" style="margin-bottom:16px;">
<img src="data:image/png;base64,'.base64_encode($row['images']).'" class="img-thumbnail" />
</div>
';
}
}
$output .= '</div>';
echo $output;
?>
About the author
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...
zafar
July 30th, 2019 - 6:34AMhello sir image save in database correct but how the image save in folder please reply
Benson Narankaik
October 06th, 2019 - 12:17AMHello 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.
You may also be interested in...
How To Make Multi Auth In Laravel 7Fix XAMPP server error xampp-control.ini Access is denied
How To Solve CORS issue in Laravel and make Laravel CORS Middleware
How To Integrate CKFinder with CKEditor
Show and Edit Dynamic Data In Modal Popup PHP
How To Use Laravel 7 Blade Component [New Feature in Laravel 7]
How To Display A Loader While Sent Request Is In Progress In Vue
Validation Handling In Laravel Vue Error Step By Step
How To Use Tinker To Store Data in Database In Laravel 6
How To Install Vue User Interface and Vue Router in Laravel 6
