Defaults and restrictions
Defaults describe the opening crop. Restrictions constrain both that opening state and later user or programmatic changes. Configure the built-in settings as flat props on Cropper.
Opening coordinates
defaultCoordinates accepts an object or a function of state and settings. It is applied when an image loads or you call reset().
If you only need a size or position, use defaultSize or defaultPosition. The remaining part is computed by the core. This example uses a default-size function to fill the available image region.
Opening visible area and priority
The visible area describes the viewport in image coordinates, including pan and zoom. Use defaultVisibleArea to restore it. Priority.coordinates computes the crop first; Priority.visibleArea computes the view first and fits the crop to it.
Defaults run on reset. A layout refresh preserves the current view where restrictions permit. To reapply a view after resizing without discarding rotation or the user’s crop, see layout and lifecycle.
Image restrictions
ImageRestriction is exported from the package root:
| Value | Purpose |
|---|---|
fitArea | Keep the image within the cropper area as far as possible; the default. |
fillArea | Keep the cropper area covered by the image. |
stencil | Keep the selection covered by the image. |
none | Remove these image-position and scale restrictions. |
Size restrictions
minWidth, minHeight, maxWidth and maxHeight use image pixels. A custom sizeRestrictions function can interpret them differently. This example uses percentages and the transformed image size.
The functions and types used by this demo are re-exported from svelte-advanced-cropper. For additional application settings shared by algorithms, use the typed settings extension object; do not put built-in keys in it. See core settings.
Fixed stencil size
FixedCropper takes a required stencilSize, either a size or a function of state and settings. It controls the displayed frame size, rather than the exported pixel dimensions. The fixed-stencil strategy combines it with the registered stencil ratio and fits it within the boundary.
Adjust the stencil while zooming
transformImage={{ adjustStencil: true }} lets ordinary Cropper adjust the selection during image transforms. Toggle it below and compare zoom behaviour near size limits. FixedCropper forces it to false to preserve the fixed frame.
Default transforms
defaultTransforms supplies opening rotation and flips. Like other defaults, it takes effect on reset. This demo explicitly resets after changing its controls.
A cropper-level aspect ratio normally takes precedence over a stencil suggestion. A custom stencilConstraints strategy can change that precedence; see stencil context.