Crop Image Before Upload Using Croppie Plugin
In this tutorial crop image before upload using croppie plugin, some time we need to crop image due to large size before upload in server. Here i will give you example of how to crop image before uploading in server or jquery crop and resize image before upload, croppie plugin provide circle and square crop photo and several others option of settings.
Read Also : How To Validate Max File Size Using Javascript
Here, I have used croppie.js CDN for crop image So copy my code and get output and i have created one folder crop_image and create index.php file into this folder for crop image before upload using croppie plugin example.
<html lang="en">
<head>
<title>Crop image using croppie plugins - techsolutionstuff.com</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.js"></script>
</head>
<body>
<h3 class="text-center">crop image using croppie plugins - techsolutionstuff.com</h3>
<div class="container">
<div class="panel panel-default" style="margin-top: 25px;">
<div class="panel-heading">Upload Image</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4 text-center" style="padding-top:30px;">
<div id="upload-input" style="width:350px; height: 400px;"></div>
</div>
<div class="col-md-4" style="padding-top:30px;">
<strong>Select Image:</strong>
<br/>
<input type="file" id="upload">
<br/>
<button class="btn btn-success upload-result">Upload Image</button>
</div>
<div class="col-md-4" >
<div id="uploaded-input" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$uploadCrop = $('#upload-input').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$('#upload').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
$.ajax({
url: "/crop_image/store_img_ajax.php",
type: "POST",
data: {"image":resp},
success: function (data) {
html = '<img style="margin: 20px;" src="' + resp + '" />';
$("#uploaded-input").html(html);
}
});
});
});
</script>
</body>
</html>Now, We need to create store_img_ajax.php file to store crop images in this folder crop_image/store_img_ajax.php
<?php
$data = $_POST['image'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$imageName = time().'.png';
file_put_contents('upload/'.$imageName, $data);
?>
You might also like :
- Read Also : How To Remove Spaces Using JQuery
- Read Also : How To Create Dynamic Line Chart In Laravel
- Read Also : How To Convert PHP Array To JSON Object
