Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Image Cropper in liferay AlloyUi

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 779
    Comment on it

    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>

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: