@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UIImageCropper

    Canvas-based image cropper supporting free-form and fixed-aspect-ratio cropping. Renders the source image with a draggable crop overlay and exports the result as PNG or JPEG via crop, or as raw pixels via cropToImageData.

    The source can be provided as a URL string via the src input, or programmatically as raw ImageData via loadImageData.

    <!-- URL-based -->
    <ui-image-cropper [src]="imageUrl" [aspectRatio]="16/9" />

    <!-- Programmatic ImageData -->
    <ui-image-cropper #cropper />

    this.cropper.loadImageData(myImageData);
    const cropped = this.cropper.cropToImageData();

    Implements

    • AfterViewInit
    Index

    Constructors

    constructor

    Properties

    ariaLabel aspectRatio disabled imageLoaded outputFormat outputQuality regionChange src

    Methods

    crop cropToImageData loadImageData ngAfterViewInit reset

    Constructors

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label for the canvas element.

    aspectRatio: InputSignal<number | null> = ...

    Locked aspect ratio (width ÷ height). When set, the crop region is constrained to this ratio. Set to null for free-form cropping.

    disabled: InputSignal<boolean> = ...

    Whether the image cropper is disabled.

    imageLoaded: OutputEmitterRef<{ height: number; width: number }> = ...

    Emits the image dimensions after a source image finishes loading.

    outputFormat: InputSignal<ImageExportFormat> = ...

    Export format. Defaults to 'image/png'.

    outputQuality: InputSignal<number> = ...

    JPEG quality (0–1). Only used when outputFormat is 'image/jpeg'.

    regionChange: OutputEmitterRef<CropRegion> = ...

    Emits the current crop region (image coords) after every change.

    src: InputSignal<string | null> = ...

    Image source — URL, data URL, or object URL. Optional when using loadImageData to supply pixels directly.

    Methods

    • Exports the current crop as a Blob in the configured format.

      Returns Promise<Blob>

      A Promise that resolves with the cropped image Blob.

      If no image is loaded or the canvas context is unavailable.

    • Exports the current crop as raw ImageData.

      Returns ImageData

      The cropped pixel data.

      If no image is loaded or the canvas context is unavailable.

    • Loads raw ImageData as the cropper source. This is the programmatic alternative to binding a URL via the src input.

      Parameters

      • data: ImageData

        The pixel data to crop.

      Returns void

    • A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

      Returns void

    • Resets the crop region to cover the entire image (or the largest area fitting the current aspect ratio).

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods