themelock.com - Limitless - Responsive Web Application Kit by Eugene Kopyov

Cropper demonstration

This example demonstrates some basic functionality with previews in different sizes. X and Y values display current cropping zone position, width and height values display current cropping zone size. You can get image info and image data by clicking on the proper button on the right side. Also you can change cropping zone aspect ratio and change image source on the fly, try to change image name in 1.png - 10.png range. 3 buttons below the main image allow you to: reset the cropping zone to the start state, release the cropping zone and reset the cropping zone with new data.

X value:

Width:

Get cropping data:

Change aspect ratio:

Y value:

Height:

Get image info:

Change img source:

Basic usage

This is the most basic example of cropper implementation. By default cropping area is centered and takes 80% of image space. The image is resizable, but should be wrapped in block element with fixed height.

Hidden overlay

This example demonstrates default options, but with hidden black modal layer above the cropper. To hide the modal set modal option to false. If visible, modal color can be easily changed in css.

Fixed position

This example demonstrates cropped area that has fixed position and can't be moved. Although it isn't movable, other options remain available: resize, dragging, callbacks, aspect ratios, modal etc.

Fixed size

This example demonstrates cropped area that has fixed size and can't be resized. Although it isn't resizable, other options remain available: moving, dragging, callbacks, aspect ratios, modal etc.

Disabled autocrop

In this example cropping zone is not rendered automatically when initialize and available only on a new drag. By default, cropping zone is always visible and can be hidden by setting autoCrop option to false.

Disabled drag

In this example the user can't remove the current cropping zone and create a new one by dragging over the image. By default, this feature is enabled and can be disabled by setting dragCrop option to false.

Fixed 16:9 ratio

Thix example demonstrates fixed 16:9 dragging (selection) ratio. By default, aspect ratio isn't specified and is free. Optional aspect ratios are also available and can be specified using aspectRatio option.

Fixed 4:3 ratio

Thix example demonstrates fixed 4:3 dragging (selection) ratio. By default, aspect ratio isn't specified and is free. Optional aspect ratios are also available and can be specified using aspectRatio option.

Minimum zone size

This example demonstrates the minimum width and height (px of original image) of the cropping zone. Better use this option only when you are sure that the image has this minimum width and height. By default, both values aren't specified.

Maximum zone size

This example demonstrates the maximum width and height (px of original image) of the cropping zone. Better use this option only when you are sure that the image has this maximum width and height. By default, both values aren't specified.

Extensions - Image Cropper