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