#ImageCropper

Select part of an image by moving and zooming it inside a fixed frame, then export a Blob at the exact outputSize. The frame follows the output aspect ratio and preserves the source proportions. Compose Slider for zoom, FileUpload for choosing a file, and your own Save action through ImageCropperContext. All processing runs in the browser; the consumer owns uploading. Preview rounding is visual only: the saved image is rectangular. Remote images need crossOrigin="anonymous" on ImageCropperImage and server CORS permission for canvas export; local file/object URLs also work. Size the preview with width classes; CSS scale transforms on ancestors are not supported by the underlying crop geometry. Arrow keys pan, Shift accelerates, and +/− zoom.

Source · Storybook

#Usage

import { ImageCropper } from '@wallarm-org/design-system/ImageCropper';

#Examples

#Landscape

Wide source and output: a 600 × 300 image is cropped to a 320 × 180 result.

#With file upload

FileUpload owns picking and validation; useFilePreviewUrl releases the local object URL.

#Controlled

The parent can accept or reject zoom changes; the image and external slider follow its value.

#Geometry

Color bands make source proportions and the exact exported selection easy to verify.

#Props

#ImageCropperGrid

#ImageCropperImage

#ImageCropperSelection

#ImageCropperViewport