Cropper Demo
This example covers image prviews with different preview sizes, Also shows X & Y co-ordinates and width - height of the cropper. With Rotate buttons you can rotate the image clockwise and anti-clockwise. You can also scale the image with horizontal flip and vertical flip buttons. You can get all data, image data, container data, canvas data and cropbox data clicking on respective buttons.
Basic Cropper
This is the most basic example with cropper shown with overlay on the image.
No Overlay
This is the most basic example with cropper shown on the image but without overlay.
16:9 Aspect Ratio
This example demonstrate the cropper ratio fixed to 16:9. This must be set using the aspectRatiooption.
4:3 Aspect Ratio
This example demonstrate the cropper ratio fixed to 4:3. This must be set using the aspectRatiooption.
Fixed Crop Box
This example demonstrate the fixed cropper that you can not move but you can increase - decrease the size of the cropper by dragging.
Fixed Size Crop Box
This example demonstrate the fixed size of the cropper. You can move the crop box but can not increase or decrease the size of the cropper.
Disable Guides
This example demonstrate the guides being turned off.
Disable Center Indicator
This example demonstrate how to disable the center indicator while still showing the guides.
Disable Auto Crop
This example demonstrate how to disable the autocrop feature. You need to set autoCrop option to falsein order to disable.
Disable New Crop Box Creation
This example demonstrate how to restrict a user from creating a new cropbox and just allowing to work with pre-defined cropbox.
Movable Image
This example demonstrate how to enable the image movement while keeping the cropbox fixed.
Zoomable Image
This example demonstrate how to enable zoom functionality on mousewheel scroll.
Minimum Crop Area
In this example we have set minimum crop area size to 100 X 100. User can not make smaller cropbox than limit applied.
Disable background
This example demonstrate how to disable the default background. Set background option to falsein order to disable default background.
Rotate Image
This example demonstrate how to rotate the default image. Required to use built function to rotate image after setting all the options.
Scale Image
This example demonstrate how to scale the default image. Required to use built function to scale image after setting all the options.
