Crop Image with Croppie + Modal

In this example below you will see how to do a Crop Image with Croppie + Modal with some HTML / CSS and Javascript

This awesome code was written by asrulnurrahim, you can see more from this user in the personal repository.
You can find the original code on
Copyright asrulnurrahim ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Crop Image with Croppie + Modal</title>
  <link rel='stylesheet prefetch' href=''>
<link rel='stylesheet prefetch' href=''>
<link rel='stylesheet prefetch' href=''>

      <link rel="stylesheet" href="css/style.css">



  <div class="container">
	<div class="row">
								<div class="col-xs-12">
									<label class="cabinet center-block">
											<img src="" class="gambar img-responsive img-thumbnail" id="item-img-output" />
										  <figcaption><i class="fa fa-camera"></i></figcaption>
										<input type="file" class="item-img file center-block" name="file_photo"/>

<div class="modal fade" id="cropImagePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						  <div class="modal-dialog">
						    <div class="modal-content">
							<div class="modal-header">
							  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							  <h4 class="modal-title" id="myModalLabel">
							  	<?=multiLanguage( "Edit Foto" , "Edit Photo" )?></h4>
							<div class="modal-body">
				            <div id="upload-demo" class="center-block"></div>
							 <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="cropImageBtn" class="btn btn-primary">Crop</button>
  <script src=''></script>
<script src=''></script>
<script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
	display: block;
	cursor: pointer;

label.cabinet input.file{
	position: relative;
	height: 100%;
	width: auto;
	opacity: 0;
	-moz-opacity: 0;

	width: 250px;
	height: 250px;
figure figcaption {
    position: absolute;
    bottom: 0;
    color: #fff;
    width: 100%;
    padding-left: 9px;
    padding-bottom: 5px;
    text-shadow: 0 0 10px #000;

/*Downloaded from */
// Start upload preview image
$(".gambar").attr("src", "");
						var $uploadCrop,
						function readFile(input) {
				 			if (input.files && input.files[0]) {
				              var reader = new FileReader();
					            reader.onload = function (e) {
						            rawImg =;
					        else {
						        swal("Sorry - you're browser doesn't support the FileReader API");

						$uploadCrop = $('#upload-demo').croppie({
							viewport: {
								width: 150,
								height: 200,
							enforceBoundary: false,
							enableExif: true
						$('#cropImagePop').on('', function(){
							// alert('Shown pop');
							$uploadCrop.croppie('bind', {
				        		url: rawImg
				        		console.log('jQuery bind complete');

						$('.item-img').on('change', function () { imageId = $(this).data('id'); tempFilename = $(this).val();
																										 $('#cancelCropBtn').data('id', imageId); readFile(this); });
						$('#cropImageBtn').on('click', function (ev) {
							$uploadCrop.croppie('result', {
								type: 'base64',
								format: 'jpeg',
								size: {width: 150, height: 200}
							}).then(function (resp) {
								$('#item-img-output').attr('src', resp);
				// End upload preview image