03-Apr-2023
.
Admin
Hi guys,
Today i will explained to the How To Image Crop and Resize Using CropperJS With PHP. This example is so easy to use in php. THis example to i am upload to the image with cropperjs in php language.
This example to use us so easy. I am use few line php code and few line to js code and create to the example. This example to i am use in cropperjs in crop to the image.
sSo let's start to the example and follow to the my all step.
Example :
crop.php
<!DOCTYPE html>
<html>
<head>
<title>Image Crop and Resize Using CropperJS With PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone/dist/dropzone.css" />
<link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet"/>
<script src="https://unpkg.com/dropzone"></script>
<script src="https://unpkg.com/cropperjs"></script>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<div class="container" align="center">
<br />
<h3 align="center">Image Crop and Resize Using CropperJS With PHP</h3>
<br />
<div class="row">
<div class="col-md-4"> </div>
<div class="col-md-4">
<div class="image_area">
<form method="post">
<label for="upload_image">
<img src="images/image1.jpg" id="uploaded_image" class="img-responsive img-circle" />
<div class="overlay">
<div class="text">Click To Change Image</div>
</div>
<input type="file" name="image" class="image" id="upload_image" style="display:none" />
</label>
</form>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Crop Image Before Upload</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row">
<div class="col-md-8">
<img src="" id="sample_image" />
</div>
<div class="col-md-4">
<div class="preview"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="crop" class="btn btn-primary">Crop</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
.image_area {
position: relative;
}
img {
display: block;
max-width: 100%;
}
.preview {
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
}
.modal-lg{
max-width: 1000px !important;
}
.overlay {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.5);
overflow: hidden;
height: 0;
transition: .5s ease;
width: 100%;
}
.image_area:hover .overlay {
height: 50%;
cursor: pointer;
}
.text {
color: #333;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
script.js
$(document).ready(function(){
var $modal = $('#modal');
var image = document.getElementById('sample_image');
var cropper;
$('#upload_image').change(function(event){
var files = event.target.files;
var done = function(url){
image.src = url;
$modal.modal('show');
};
if(files && files.length > 0)
{
reader = new FileReader();
reader.onload = function(event)
{
done(reader.result);
};
reader.readAsDataURL(files[0]);
}
});
$modal.on('shown.bs.modal', function() {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 3,
preview:'.preview'
});
}).on('hidden.bs.modal', function(){
cropper.destroy();
cropper = null;
});
$('#crop').click(function(){
canvas = cropper.getCroppedCanvas({
width:400,
height:400
});
canvas.toBlob(function(blob){
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function(){
var base64data = reader.result;
$.ajax({
url:'do_crop.php',
method:'POST',
data:{image:base64data},
success:function(data)
{
$modal.modal('hide');
$('#uploaded_image').attr('src', data);
}
});
};
});
});
});
do_crop.php
<?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]);
$image_name = 'images/' . time() . '.png';
file_put_contents($image_name, $data);
echo $image_name;
}
?>
Output
i hope it can help you...
So, finally we are done with our code we can get below output.
#PHP 8
#PHP
