The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

1. Initialize the plugin by referencing the necessary files:

                
                    <script src="/path/to/cropper.js"></script>
                    <link rel="stylesheet" type="text/css" href="/path/to/cropper.css">
                
            

2. Wrap the image or canvas element with a block element (container).

                
                    <div>
                        <img id="image" src="picture.jpg">
                    </div>
                
            

3. Limit image width to avoid overflow the container.

                
                    img {
                        max-width: 100%; /* This rule is very important, please do not ignore this! */
                    }
                
            

3. Basic usage may look something like this.

                
                    $('#image').cropper({
                        aspectRatio: 16 / 9,
                            crop: function(e) {
                            // Output the result data for cropping image.
                            console.log(e.x);
                            console.log(e.y);
                            console.log(e.width);
                            console.log(e.height);
                            console.log(e.rotate);
                            console.log(e.scaleX);
                            console.log(e.scaleY);
                        }
                    });
                
            

Refer following links for usage:

Type	URL
Plugin Link	https://fengyuanchen.github.io/cropper
Github Page	https://github.com/fengyuanchen/cropper
Template Page	http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/add-on-image-cropper.html