### Image Cropper

#### Cropper Demo

This example covers image previews 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.

X
px
Y
px
Width
px
Height
px

#### 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 `aspectRatio` option.

#### 4:3 Aspect Ratio

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

#### 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 `false` in 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 `false` in 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.

#### Theme Customizer

Customize & Preview in Real Time

##### Menu Color Options

##### Layout Options

Collapsed Menu
Fixed Layout
Boxed Layout
Static Layout
Native Scroll
Right Side Icons
Bordered Navigation
Flipped Navigation
Collapsible Navigation
Static Navigation
Brand Center
Static Top

##### Navigation Color Options

###### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

###### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink

### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink
Buy Now