PHP - jquery ajax crop image before upload using croppie plugin

By Hardik Savani | August 6, 2016 | | 154898 Viewer | Category : PHP Javascript Bootstrap jQuery


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.itsolutionstuff.com/plugin/jquery.js"></script>

<script src="http://demo.itsolutionstuff.com/plugin/croppie.js"></script>

<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">

<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/croppie.css">

</head>

<body>


<div class="container">

<div class="panel panel-default">

<div class="panel-heading">Image Upluad</div>

<div class="panel-body">


<div class="row">

<div class="col-md-4 text-center">

<div id="upload-demo" style="width:350px"></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" 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.






Do you want to expert php developer or developer team for your projects ?
Contact US
We are Recommending you: