Image Cropper Plugin
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.