Agfdhyk

 <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.js'></script>

  <script src='https://foliotek.github.io/Croppie/croppie.js'></script>

  <script>

   $(function ()

                {

                    $("#wizard").steps({

                        headerTag: "h2",

                        bodyTag: "section",

                        transitionEffect: "slideLeft"

                    });

                });

var $uploadCrop,

tempFilename,

rawImg,

imageId;

function readFile(input) {

	if (input.files && input.files[0]) {

		var reader = new FileReader();

		reader.onload = function (e) {

			$('.upload-demo').addClass('ready');

			$('#cropImagePop').modal('show');

			rawImg = e.target.result;

		};

		reader.readAsDataURL(input.files[0]);

	} else

	{

		swal("Sorry - you're browser doesn't support the FileReader API");

	}

}



$uploadCrop = $('#upload-demo').croppie({

	viewport: {

		width: 250,

		height: 250 },



	enforceBoundary: false,

	enableExif: true });



$('#cropImagePop').on('shown.bs.modal', function () {

	// alert('Shown pop');

	$uploadCrop.croppie('bind', {

		url: rawImg }).

	then(function () {

		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: 1000, height: 1000 } }).

	then(function (resp) {

		$('#item-img-output').attr('src', resp);

		$('#cropImagePop').modal('hide');

	});

});

//# sourceURL=pen.js

    </script>

 <link rel='stylesheet' href='https://foliotek.github.io/Croppie/croppie.css'>

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css'>

  <div id="wizard">

   <h2>upload Image</h2>

                    <section>

                        <h3>Upload and crop your image</h3>







                        <div class="row">

                            <input type="file" name="" class="item-img" accept="image/*" />

                        </div>

                        <div class="row">

                            <h3>Result Image</h3>

                            <div class="image-output">

                                <img src="" alt="" id="item-img-output" />

                            </div>

                        </div>





                        <div id="cropImagePop" class="modal" tabindex="-1" role="dialog">

                            <div class="modal-dialog" role="document">

                                <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">Crop Image</h4>

                                    </div>

                                    <div class="modal-body">

                                        <div class="col-xs-12 col-sm-4 col-sm-offset-4">

                                            <div style="display: block; width: 300px; height: 300px;">

                                                <div id="upload-demo"></div>

                                            </div>

                                        </div>

                                    </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>

                                    </div>

                                </div><!-- /.modal-content -->

                            </div><!-- /.modal-dialog -->

                        </div>









                    </section>

  <h2>The other part</h2>

  <section>

  <p>Blah Blah Blah </p>

  </section>

</div>