如何在步骤js或tab js中使用Croppie？它在步骤js中不起作用

Question

我需要在Steps Js中使用Croppie Js上传和裁剪图像。 但这是行不通的。当我禁用步骤时，它可以正常工作。 我不知道这是什么问题。 我也在Bootstrap Modal中对其进行了测试，但是它也不起作用。 您能否检查下面的代码并为我提供帮助？ 这是我的代码，希望有人可以救救我

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