Image Crop and Resize Using CropperJS With PHP

PHP 8 , PHP

Nicesnippets

1930

11-06-2021


Image Crop and Resize Using CropperJS With PHP

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.


Recommended Posts