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.

Demo

Source Code

HTML

<h2>upp-crop-image</h2>
<p class="demo-description">Image cropping component based on <code>ngx-img-cropper</code>.</p>

<div class="demo-section">
    <h3>About</h3>
    <p>The <code>upp-crop-image</code> component is used <strong>internally</strong> by <code>upp-image</code> to provide
    image cropping functionality. It is not typically used standalone.</p>
    <p>To see image cropping in action, visit the <strong>upp-image</strong> demo and toggle an image to editable mode.</p>
</div>

<div class="demo-section">
    <h3>API</h3>
    <table class="demo-table">
        <thead><tr><th>Input</th><th>Type</th><th>Description</th></tr></thead>
        <tbody>
            <tr><td>[image]</td><td>string</td><td>Base64 image source to crop</td></tr>
            <tr><td>[height]</td><td>number</td><td>Crop area height in pixels</td></tr>
            <tr><td>[width]</td><td>number</td><td>Crop area width in pixels</td></tr>
        </tbody>
    </table>
    <table class="demo-table">
        <thead><tr><th>Output</th><th>Type</th><th>Description</th></tr></thead>
        <tbody>
            <tr><td>(Cropped)</td><td>string</td><td>Emits the cropped image as base64</td></tr>
        </tbody>
    </table>
</div>

TypeScript

import { Component } from '@angular/core';
import { ChangeDetectionStrategy } from '@angular/core';

@Component({
    selector: 'demo-upp-crop',
    templateUrl: './demo-upp-crop.html',
    styleUrls: ['../demo-common.scss', './demo-upp-crop.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DemoUppCropComponent {}

SCSS

:host {
    display: block;
    padding: 16px;
}

.demo-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 14px;

    th, td {
        text-align: left;
        padding: 8px 12px;
        border-bottom: 1px solid var(--ion-color-light, #eee);
    }

    th {
        font-weight: 600;
        color: var(--ion-color-medium, #888);
    }
}

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).