Croppie JS Seperate Crop and Upload using Ajax

Crop Button and Upload are seperated.

by lemon kazi

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.css">
<html>  
<head>  
	<title>Crop & Upload Image using Croppie.js</title>  


<body>  
	<div class="container">
		<div class="panel-heading">Select Profile Image</div>
		<div class="panel-body">
			<input type="file" name="upload_image" id="upload_image" />
			<div id="uploaded_image"></div>
      <img src="" class="gambar img-responsive img-thumbnail" id="item-img-output" />
			<br>
			<button class="btn-add">Add</button>
		</div>
	</div>
</body>  
</html>

<div id="uploadimageModal" class="modal" role="dialog">


      		<div class="modal-header">
        		<button type="button" class="close" data-dismiss="modal">&times;</button>
        		<h4 class="modal-title">Upload & Crop Image</h4>
      		</div>
      		<div class="modal-body">
				<div id="image_demo" style="width:350px; margin-top:30px"></div>
				<button class="btn btn-success crop_image">Crop</button>
      		</div>
      		<div class="modal-footer">
        		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      		</div>


</div>

CSS

.panel-heading{
	border: 1px solid red;
}
.panel-body{
	border: 1px solid black;
}
.img-thumbnail {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 50%;
}
#uploadimageModal{
	position: fixed;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 50%;
    background-color: white;
    height: 99%;
}
	.modal-header{
		display: block;
		position: relative;
		border: 1px solid gray;
	}
		.modal-header .modal-title{
			text-align: center;
		}
		.modal-header .close{
			position: absolute;
			right: 0;
			top: 0;
		}
	.modal-body{
		display: inline-block;
		vertical-align: top;
		border: 1px solid black;
		height: 450px;
		width: 100%;
		text-align: center;
	}

JavaScript

$image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width:200,
      height:200,
      type:'circle' //circle
    },
    boundary:{
      width:300,
      height:300
    }
  });

  $('#upload_image').on('change', function(){
    var reader = new FileReader();
    reader.onload = function (event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      }).then(function(){
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
    $('#uploadimageModal').modal('show');
  });

$('.crop_image').on('click', function (event) {
	$image_crop.croppie('result', {
		type: 'canvas',
		format: 'jpeg',
		//type: 'canvas',
		size: 'viewport'
		//size: {width: 150, height: 200}
	}).then(function (response) {
  console.log(response);
		$('#item-img-output').attr('src', response);
		$('#uploadimageModal').modal('hide');
	});
});
  



$('.btn-add').on('click', function (response) { 
   console.log(response);
		$.ajax({
        url:"upload.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
          //$('#uploadimageModal').modal('hide');
          //$('#uploaded_image').html(data);
		  alert(data);
        }
      });

});