Image Cropper

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.

Picture
X
px
Y
px
Width
px
Height
px

Basic Cropper

This is the most basic example with cropper shown with overlay on the image.

Picture

No Overlay

This is the most basic example with cropper shown on the image but without overlay.

Picture

16:9 Aspect Ratio

This example demonstrate the cropper ratio fixed to 16:9. This must be set using the aspectRatio option.

Picture

4:3 Aspect Ratio

This example demonstrate the cropper ratio fixed to 4:3. This must be set using the aspectRatio option.

Picture

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.

Picture

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.

Picture

Disable Guides

This example demonstrate the guides being turned off.

Picture

Disable Center Indicator

This example demonstrate how to disable the center indicator while still showing the guides.

Picture

Disable Auto Crop

This example demonstrate how to disable the autocrop feature. You need to set autoCrop option to false in order to disable.

Picture

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.

Picture

Movable Image

This example demonstrate how to enable the image movement while keeping the cropbox fixed.

Picture

Zoomable Image

This example demonstrate how to enable zoom functionality on mousewheel scroll.

Picture

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.

Picture

Disable background

This example demonstrate how to disable the default background. Set background option to false in order to disable default background.

Picture

Rotate Image

This example demonstrate how to rotate the default image. Required to use built function to rotate image after setting all the options.

Picture

Scale Image

This example demonstrate how to scale the default image. Required to use built function to scale image after setting all the options.

Picture