upp-crop

Image cropping component built on the ngx-img-cropper library. It provides a canvas-based cropper with aspect-ratio preservation and base64 JPEG output.

Internal component

upp-crop-image is used internally by upp-image to provide image cropping functionality through a modal. It is not typically used as a standalone component.

To see image cropping in action, visit the upp-image demo and toggle an image to editable mode.

API Reference

UppCropComponent

Selector: upp-crop-image

Inputs

Property	Type	Default	Description
image	any	null	The source Image object to crop. Typically provided by UppImageComponent after EXIF processing.
height	number	0	Required crop height in pixels. Must be greater than 0 or the component throws on init.
width	number	0	Required crop width in pixels. Must be greater than 0 or the component throws on init.

Outputs

Property	Type	Description
Cropped	EventEmitter<any>	Emits the cropped image as a base64 data-URL (JPEG, 75% quality).

Key Behaviours

• On ngOnInit, validates that both height and width are positive, then configures CropperSettings with noFileInput: true, JPEG output at 75% compression, and aspect-ratio lock.
• After the view initialises, polls every 50ms until the parent container has a non-zero width, then sets the canvas dimensions and loads the image into the cropper.
• OnSave() reads the crop bounds, draws the cropped region onto an off-screen canvas at the target resolution, and emits the base64 result through Cropped.

Usage Example

<upp-crop-image
  [image]="sourceImage"
  [height]="300"
  [width]="300"
  (Cropped)="onCropped($event)">
</upp-crop-image>

Direct usage is uncommon. Most cropping goes through UppImageComponent, which opens UppModalCropComponent (a thin modal wrapper around UppCropComponent).