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.
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.
