Example of how we can use Foliotek/Croppie extension to upload and crop images on fly with javascript

Html:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css" />

</head>
<body>

<h1>Example of upload and crop image functionality with Foliotek/Croppie</h1>
                <div class="demo-wrap upload-demo">
                    <div class="container">
                        <div class="pull-left">
                           
                            <div class="actions">
                                <a class="btn file-btn">
                                    <input type="file" id="upload" value="Выберите файл" accept="image/*" />
                                </a>
                                <button class="upload-result">Result</button>
                                <input type="hidden" id="userprofile-avatar" class="form-control" >
                            </div>
                        </div>
                        <div class="pull-left">
                            <div class="upload-msg">
                                Upload a file to start cropping
                            </div>
                            <div class="upload-demo-wrap">
                                <div id="upload-demo"></div>
                            </div>
                        </div>
                    </div>
                </div>  

                <div id="cropped-result">Result:<br><img></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>	
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
</body>
</html>

Css:

.upload-demo .upload-demo-wrap,

.upload-demo.ready .upload-msg {
    display: none;
}
.upload-demo.ready .upload-demo-wrap {
    display: block;
}
.upload-demo.ready .upload-result {
    display: block;    
}
.upload-demo-wrap {
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.upload-demo .container {
    margin-left: 0px;
    padding-left: 0px;
}

.upload-msg {
    text-align: center;
    padding: 50px;
    font-size: 22px;
    color: #aaa;
    width: 260px;
    margin: 50px auto;
    border: 1px solid #aaa;
}
#cropped-result {
  margin-top:100px;
}

javascript:

$(document).ready(function(){

    var $uploadCrop;

    function readFile(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.upload-demo').addClass('ready');
            $uploadCrop.croppie('bind', {
                    url: e.target.result
            }).then(function(){
                    console.log('jQuery bind complete');
            });

        }

        reader.readAsDataURL(input.files[0]);
    }
    else {
            console.log("Sorry - you're browser doesn't support the FileReader API");
        }
    }

    $uploadCrop = $('#upload-demo').croppie({
            viewport: {
                    width: 200,
                    height: 200,
                    //type: 'circle'
            },
            enableExif: true
    });

    $('#upload').on('change', function () { readFile(this); });
    
	$('.upload-result').on('click', function (ev) {
		$uploadCrop.croppie('result', {
			type: 'canvas',
			size: 'viewport'
		}).then(function (resp) {
			// in this hidden input we can send cropped image to server
			$('#userprofile-avatar').val(resp);
			$('#cropped-result img').attr('src',resp);
		});
	});    

});

mgrechanik/gistcroppie.md

Example of how we can use Foliotek/Croppie extension to upload and crop images on fly with javascript

Html:

Css:

javascript: