over 6 years ago
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>
Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).
Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.
Chrome Version Support
Are you sure, you want to delete this comment?
Sign up using
0 Comment(s)