Image cropper is the UI part of the web application to crop the image as requirement using mouse drag-drop.

Image cropper is inbuilt functionality in the Liferay.

Follow below steps to better understand :

Load the below Js and CSS files, if you haven't yet.

<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Create an HTML element in jsp or html page with image nested inside:

<div id="imageCropDiv">
  <img id="image-src" src="http://bhagwansingh.com/image/crop_image.png" />
</div>


<aui:script>
YUI().use(
  'aui-image-cropper',
  function(Y) {
   
/* Rendring image*/

    var imageCropper = new Y.ImageCropper(
      {
        srcNode: "#image-src"
      }
    ).render();
    
  
 /* Image crop button*/


    var image = Y.one('#image-src');
    var cropImgButton = Y.one('#crop-Button');
    var croppedImage = Y.one('#cropped-Image');

/*Create button at runtime */
    cropImgButton.on(
      'click',
      function(event) {
        var cropRegion = imageCropper.get('region');
        croppedImage.setStyles(
          {
            'backgroundPosition': (-cropRegion.x) + 'px ' + (-cropRegion.y) + 'px',
            height: cropRegion.height,
            width: cropRegion.width
          }
        );
      }
    );

    croppedImage.show();
  }
);

</aui:script>