Image Cropper

Crop, zoom, and rotate images. Supports Reactive Forms and Signal API.

Basic Cropper (16:9)

Default 16:9 aspect ratio. Drag to crop, zoom with +/-, rotate with the slider.

Cropped Result

Cropped preview

0 × 0 px

Code
<rui-cropper
  [src]="'https://picsum.photos/800/600'"
  [rotationMin]="-10"
  [rotationMax]="10"
  [(croppedImage)]="cropped"
/>

Square 1:1 (Fixed Aspect)

Fixed 1:1 aspect ratio in a 320px square container. No aspect dropdown shown.

Code
<div style="width:20rem;height:20rem;">
  <rui-cropper
    [src]="'...'"
    [aspectRatio]="'1:1'"
  />
</div>

Free Aspect Ratio

Container has 4:3 aspect ratio. Aspect ratio selector is visible.

Code
<div style="aspect-ratio:4/3;max-width:42rem;">
  <rui-cropper
    [src]="'...'"
    [aspectRatio]="'free'"
  />
</div>

Fixed Width with Sidebar

Set a fixed width like [width]="600" so the cropper size stays constant regardless of sibling layout changes.

Code
<rui-cropper
  [src]="'...'"
  [width]="600"
  [aspectRatio]="'16:9'"
/>

Error Handling

When the image fails to load, a loadError event is emitted.

Code
<rui-cropper
  [src]="errorSrc()"
  (loadError)="errorMsg.set($event)"
/>

Dynamic Configuration

Change aspect ratio, format, quality, and output size on the fly.

Code
<rui-cropper
  [src]="'...'"
  [aspectRatio]="dynAspect()"
  [outputFormat]="dynFormat()"
  [outputQuality]="dynQuality()"
  [outputWidth]="dynWidth()"
  [outputHeight]="dynHeight()"
  [(croppedImage)]="cropped"
/>

Toolbar Positions

The toolbar can be placed at top, bottom (default), left, or right.

Bottom (default)

Top

Left

Right

Code
<rui-cropper [src]="'https://picsum.photos/800/600'" toolbarPosition="top" />

<rui-cropper [src]="'https://picsum.photos/800/600'" toolbarPosition="bottom" />

<rui-cropper [src]="'https://picsum.photos/800/600'" toolbarPosition="left" />

<rui-cropper [src]="'https://picsum.photos/800/600'" toolbarPosition="right" />

Constrain to Image

When constrainToImage is true (default), the crop selection cannot leave the original image area — even when zooming out or rotating.

Try zooming out (-) or rotating (r). The crop stays inside the image.

Code
<mat-slide-toggle [checked]="constrainEnabled()" (change)="constrainEnabled.set($event.checked)">
  constrainToImage: {{ constrainEnabled() }}
</mat-slide-toggle>

<rui-cropper
  [src]="'...'"
  [constrainToImage]="constrainEnabled()"
  [aspectRatio]="'free'"
  [rotationMin]="-180"
  [rotationMax]="180"
/>

Template-driven Form

Using ngModel with the cropper. The model value is the cropped image data URL.

Model value: none

Code
<rui-cropper
  [src]="'https://picsum.photos/800/600'"
  ngModel
  name="cropperModel"
  #cropperModelRef="ngModel"
  [rotationMin]="-10"
  [rotationMax]="10"
/>

Reactive Form

Using formControl with the cropper. The control value is the cropped image data URL.

Control value: none

Control enabled: true

Code
<rui-cropper
  [src]="'https://picsum.photos/800/600'"
  [formControl]="cropControl"
  [rotationMin]="-10"
  [rotationMax]="10"
/>

Signal Form

Using model() signal directly — no FormsModule or ReactiveFormsModule needed.

Signal value: none

Code
<rui-cropper
  [src]="'https://picsum.photos/800/600'"
  [(croppedImage)]="cropped"
  [rotationMin]="-10"
  [rotationMax]="10"
/>