Cropping is an action to cut a selected part from the original image. Image editor software like Photoshop will always have the crop tool. php crop image is least requirement when create an application to modify images.
In this blog, I will create a crop tool in a PHP web application to crop images using Croppie js. Croppie is a fast, easy to use image cropping with tons of configuration options!
Below screenshot shows the original image with the crop button control. Also, the cropped image output is displayed at the bottom of this screenshot.
The original image will be loaded on a bootstrap modal when executing given code. Next user can select the crop area using the mouse drag events. Once the crop area is selected, it can be modify when changing the selected dimensions. The crop button’s click event will trigger the code execution to return the image blob for the cropped area.
Directory Structure
php-crop-tool/ | ├─ upload ├─ crop.php └─ processajax.php
Loading Original Image in Bootstrap Modal
Create file crop.php in folder php-crop-tool.
This is the primary page that loads the original image. The user can select and manage crop boundaries using mouse drag. This page contains the crop button on clicking, of which the jQuery script will be executed to prepare cropped image output (using PHP) to show it to the browser.
<!DOCTYPE html>
<html>
<head>
<title>Crop Image Before Upload 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>
<style>
.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;
}
</style>
</head>
<body>
<div class="container" align="center">
<br />
<h3 align="center">Crop Image</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="upload/user.png" id="uploaded_image" class="img-responsive img-circle" />
<div class="overlay">
<div class="text">Click to Change Profile 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="output_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>
Croppie jQuery Script to Prepare Cropped Image
This jQuery script handles the crop area selection and the crop action events. When the user selects the crop area, the crop area coordinates and the dimensions are indexed using the ‘cropper’ callback of the Croppie js.
<script>
$(document).ready(function(){
const type_reg = /^image\/(jpg|png|jpeg|bmp|gif|ico|webp)$/;
let $modal = $('#modal');
let image = document.getElementById('output_image');
let cropper;
$('#upload_image').change(function(event){
let files = event.target.files;
let done = function(url){
image.src = url;
$modal.modal('show');
};
let type = files[0].type;
if ( ! type_reg.test(type)) {
alert('Please Upload Valid Image of type jpg,png,jpeg,bmp,gif,ico,webp');
return false;
}
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:'processajax.php',
method:'POST',
data:{image:base64data},
success:function(data)
{
$modal.modal('hide');
$('#uploaded_image').attr('src', data);
}
});
};
});
});
});
</script>
PHP Code to Create Dynamic Image
Create file processajax.php in folder php-crop-tool.
This PHP code receives the cropped image dimensions and coordinates. These data are used to create a dynamic cropped image.
<?php
if(isset($_POST['image']))
{
$data = $_POST['image'];
$imageDataFirst = explode(";", $data);
$imageDataSecond = explode(",", $imageDataFirst[1]);
$data = base64_decode($imageDataSecond[1]);
$imageName = 'upload/' . time() . '.png';
file_put_contents($imageName, $data);
echo $imageName;
}
Download Full Source Code
Suggested post : How to Create WordPress Widget
