Compose a cropper

Cropper and FixedCropper own image loading, geometry, cleanup and context. Compose their children to choose the crop region; use snippets to replace a visual layer.

Children choose the stencil

With no children, a cropper creates a RectangleStencil. Supplying children replaces that default entirely. Children without a registered stencil are valid: the image can still be transformed and exported. Put extra guides inside the stencil’s own children snippet so they share its positioned crop region.

Only one stencil may be registered in each cropper. Conditional replacement preserves the existing crop as far as the new constraints allow. A nested cropper supplies its own context.

  • Cropper / FixedCropper
    • getCropperContext() cropper, disabled, image, registerStencil
    • wrapper CropperWrapper by default
      • boundary StretchableBoundary · registerBoundary
        • backgroundWrapper CropperBackgroundWrapper by default
          • background CropperBackgroundImage · attachSource
          • children default RectangleStencil when omitted
            • RectangleStencil / CircleStencil / custom stencil registers options through context
Context Component Snippet

Rendering layers

The default tree is CropperWrapper → StretchableBoundary → CropperBackgroundWrapper → background image and stencil children. The boundary also contains the internal export canvas. The wrapper, boundary, backgroundWrapper and background snippets replace their respective layers.

See layer composition, custom stencils and preview composition.

Settings and algorithms

Pass built-in settings directly: minWidth, aspectRatio, defaultCoordinates and imageRestriction are cropper props. The settings object is reserved for your extension fields; those fields cannot redefine built-in settings. CropperInstance<E> preserves the extension type in getSettings() and callbacks.

Algorithm props, postProcess and stencilConstraints let a composed cropper change geometry policy. See Cropper and core settings. There is no public headless Svelte controller; an independently managed core integration owns its own loading, reactivity and cleanup.