#### Extensions - Image Cropper

Statistics Invoices Schedule

##### 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, `scaleX` and `scaleY` values display current image scale. You can get image, crop box and container data by clicking on the proper button on the right side. Also you can change cropping zone aspect ratio and download cropped image on the fly.

Toolbar:
Crop:
Aspect ratio:
16:9 4:3 1:1 2:3 Free
Clear Crop
Disable Enable
Destroy Create
X value:
Width:
ScaleX:
Y value:
Height:
ScaleY:
General data:
Container & image data:
Canvas data:
Crop box data:

##### 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 image drag

In this example the user can't drag the image within container, but can drag cropping area.. By default, this feature is disabled and can be enabled by setting `movable` 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.

##### Disabled zoom

This example demonstrates the ability to disable `zoom` feature, it works in both options: disables zoom on scroll and zoom on touch. By default, image cropper is zoomable, to disable zooming set `zoomable` option to `false`.

###### Cropped