crop with resize image using the croppie plugin – onlinecode
In this post we will give you information about crop with resize image using the croppie plugin – onlinecode. Hear we will give you detail about crop with resize image using the croppie plugin – onlinecodeAnd how to use it also give you demo for it if it is necessary.
Today, In this tutorial, we are going to tell you how to crop with resize and upload using jquery ajax and php. so let’s discuss about croppie plugin.
It’s used to create user avatar(thumbnail) image and the specific size-wise or crop images are used in many websites, so we will use the cropping plugin for that type image upload.
jquery Croppie plugin is an Html5 canvas-based image cropping library and it’s provided zooming facility and cropper type option like as square and circle.
index.php
In this file, we are creating the bootstrap modal and when the user clicks on add image button then will be open the modal and user can resize and crop the image. when the user clicks on upload images button then the image will be upload in the upload directory by ajax.
<!DOCTYPE html>
<html lang="en">
<head>
<title>crop with resize image using the croppie plugin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.3/croppie.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.3/croppie.css">
</head>
<body>
<div >
<div >
<div >
<h2>Image Upload</h2>
</div>
</div>
<div >
<div >
<div id="upload_image" style="background:#e1e1e1;width:300px;padding:30px;height:300px;"></div>
</div>
</div>
<br>
<div >
<div >
<button type="button" data-toggle="modal" data-target="#myModal">Add Image</button>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" role="dialog">
<div >
<!-- Modal content-->
<div >
<div >
<button type="button" data-dismiss="modal">×</button>
<h4 >Upload image</h4>
</div>
<div >
<div >
<div >
<div id="select_image" style="width:350px"></div>
</div>
</div>
<div >
<div >
<label for="pwd">Select Image::</label>
<input type="file" id="upload">
</div>
<div >
<button >Upload Image</button>
</div>
</div>
</div>
<div >
<button type="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$uploadCrop = $('#select_image').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'square'
},
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: "save_image.php",
type: "POST",
data: {"image":resp},
success: function (data) {
html = '<img src="' + resp + '" />';
$("#upload_image").html(html);
$("#myModal").modal("hide");
}
});
});
});
</script>
</body>
</html>save_image.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);
echo 'success';
?>Hope this code and post will helped you for implement crop with resize image using the croppie plugin – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs