Choose a cropper

Choose the interaction first: should the user move the selection, move the photo under a fixed frame, or resize a frame that settles back into place?

Movable selection

Cropper supplies a movable, resizable rectangle when you omit children. Use a child stencil to configure its shape and controls.

Fixed selection

Use FixedCropper with a stencilSize. Its size is measured in layout pixels; zoom changes how many image pixels are inside that frame. To make the frame inert, explicitly hide and disable the child stencil’s controls.

ImageRestriction.stencil keeps the photo covering the selection. A stencil-size function can adapt the frame to the boundary, and oversized requests are fitted within it. See defaults and restrictions.

A frame that settles after interaction

Leave the fixed cropper’s stencil interactive when users should be able to resize it before it settles back to its configured size.

For a more specialized mobile interface, compose a toolbar through a wrapper snippet and supply core algorithms. The showcase includes a Telegram-style editor and a Twitter-style avatar cropper. The absolute zoom tutorial explains the fixed-frame slider in detail.