> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# 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](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/ImageCropper) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/inputs-imagecropper--overview)
```tsx
export const Avatar = () => ;
```
## Usage
```tsx
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.
```tsx
import { LANDSCAPE } from './stories/fixtures';
export const Landscape = () => (
);
```
### With file upload
FileUpload owns picking and validation; useFilePreviewUrl releases the local object URL.
```tsx
export const WithFileUpload = () => ;
```
### Controlled
The parent can accept or reject zoom changes; the image and external slider follow its value.
```tsx
import { useState } from 'react';
import { Button } from '@wallarm-org/design-system/Button';
export const Controlled = () => {
const [zoom, setZoom] = useState(1.5);
const [locked, setLocked] = useState(false);
return (