Croppie
Croppie is a fast, easy to use image cropping plugin with tons of configuration options!
--
-- Table structure for table `uploads`
--
CREATE TABLE `uploads` (
`id` int(11) NOT NULL,
`file_name` varchar(150) NOT NULL,
`upload_time` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `uploads`
--
INSERT INTO `uploads` (`id`, `file_name`, `upload_time`) VALUES
(1, '1613121943.jpg', '2021-02-12 10:25:43');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `uploads`
--
ALTER TABLE `uploads`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `uploads`
--
ALTER TABLE `uploads`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
//index.php
<!DOCTYPE html>
<html>
<head>
<title>PHP Mysql Image Crop & Upload using JQuery Ajax</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css" />
</head>
<body>
<div class="container">
<br />
<h3 align="center">PHP Mysql Image Crop & Upload using JQuery 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="upload_image" id="upload_image" accept="image/*" />
<br />
<div id="uploaded_image"></div>
</div>
</div>
</div>
<div id="uploadimageModal" 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">Upload & Crop 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 & Upload 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
}
});
$('#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]);
$('#uploadimageModal').modal('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)
{
$('#uploadimageModal').modal('hide');
$('#uploaded_image').html(data);
}
});
})
});
});
</script>
</body>
</html>
upload.php
<?php
//upload.php
include('dbcon.php');
if(isset($_POST["image"]))
{
$data = $_POST["image"];
$img_array_1 = explode(";", $data);
$img_array_2 = explode(",", $img_array_1[1]);
$basedecode = base64_decode($img_array_2[1]);
$filename = time() . '.jpg';
file_put_contents("upload/$filename", $basedecode);
//file_put_contents($filename, $basedecode);
echo '<img src="'.$filename.'" class="img-thumbnail" />';
$now = date("Y-m-d H:i:s");
$sql = "INSERT INTO uploads(file_name, upload_time) VALUES ('$filename','$now')";
$conn->query($sql);
}
?>
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>
