Skip to main content

Cropper Types

The croppers are different. The mission of this library is give the developer possibility to create not only croppers with different appearance, but also with different behavior.

Despite the variety of different croppers they can be classified on the three groups:

If you able to create all of them, you will able to create almost any of existing and even possible croppers.

Classic Cropper#

The classic cropper is the cropper, where the major way to choice an area is the resizing and moving the stencil. Depending on specific cropper use may or may not resize and move image, but it's always the minor way.

Examples: Yandex.

Implementation#

The most basic cropper configuration will give you the classic cropper, that is displayed above.

<Cropper src={img} />

Fixed Cropper#

The fixed cropper has the static stencil. It doesn't have handlers, it can't be moved or resized and it have a fixed size. An user can only change the image size and position.

Examples: Twitter, Instagram.

Implementation#

The recommended implementation is presented below:

import { FixedCropper, ImageRestriction } from 'react-advanced-cropper'
<FixedCropper    src={img}    stencilProps={{        handlers: false,        lines: false,        movable: false,        resizable: false,    }}    stencilSize={{        width: 300,        height: 300    }}    imageRestriction={ImageRestriction.stencil}/>

Let's describe the changes:

  1. The passing specified stencil props is needed to get rid of handlers and lines and disable the stencil moving and stencil resizing.

  2. The setting stencil size is the most reliable way to make stencil preserve it position, size and aspect ratio. It defines a real stencil size in pixels of the stencil element, so be sure, that the cropper container is always bigger than the specified size.

  3. Image restriction is set to ImageRestriction.stencil ("stencil") to allow the user to crop any part of image. If you leave it default ('fit-area') the user will be not able to crop some image areas.

Hybrid Cropper#

The hybrid cropper is the cropper that has semi-fixed stencil, i.e. user able to change its size and position, but it always tries to return to some default position and return some default size.

Examples: Telegram.

Implementation#

The fixed hybrid is the cropper type, that is very similar to the fixed cropper, but user is able to change the size and position of cropper.

To implement the hybrid cropper just remove stencilProps from the previous example:

<FixedCropper    src={img}    stencilSize={{        width: 280,        height: 280    }}    imageRestriction={ImageRestriction.stencil}/>