PHP – jquery ajax crop image before upload using croppie plugin
In this post we will give you information about PHP – jquery ajax crop image before upload using croppie plugin. Hear we will give you detail about PHP – jquery ajax crop image before upload using croppie pluginAnd how to use it also give you demo for it if it is necessary.
we mostly need to crop image before upload and as specially when we save image for user profile or etc. In this post i tell you how to crop image and save using jquery ajax.
In this example i use croppie plugin that provide to crop image with zoom and etc. croppie.js plugin is very professional that way we can easily use for crop profile image.
Bellow example through you can implement easily with php and jquery. It is pretty simple example for upload crop and save image php using croppie.js plugin.
You have to create two file and one upload directory for store crop image like as bellow:
index.php
ajaxpro.php
upload(Directory)
here is example for php upload profile picture crop.
So, let’s see example and demo too.
Preview:
index.php
<html lang="en">
<head>
<title>PHP - jquery ajax crop image before upload using croppie plugins</title>
<script src="http://demo.onlinecode/plugin/jquery.js"></script>
<script src="http://demo.onlinecode/plugin/croppie.js"></script>
<link rel="stylesheet" href="http://demo.onlinecode/plugin/bootstrap-3.min.css">
<link rel="stylesheet" href="http://demo.onlinecode/plugin/croppie.css">
</head>
<body>
<div >
<div >
<div >Image Upluad</div>
<div >
<div >
<div >
<div id="upload-demo" style="width:350px"></div>
</div>
<div style="padding-top:30px;">
<strong>Select Image:</strong>
<br/>
<input type="file" id="upload">
<br/>
<button >Upload Image</button>
</div>
<div style="">
<div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$uploadCrop = $('#upload-demo').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: "/ajaxpro.php",
type: "POST",
data: {"image":resp},
success: function (data) {
html = '<img src="' + resp + '" />';
$("#upload-demo-i").html(html);
}
});
});
});
</script>
</body>
</html>
ajaxpro.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 'done';
you can get more information about croppie.js plugin from here : Click Here.
Hope this code and post will helped you for implement PHP – jquery ajax crop image before upload using croppie plugin. 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