Development documentation
  1. Components
  2. UppCropComponent

File

libs/upp-wdgt/src/components/upp-crop/upp-crop.ts

Description

The UppCropComponent is an Angular component used for cropping images with a specified width and height. It integrates with the ngx-img-cropper library and supports base64 image output. The component includes features such as dynamic canvas resizing and aspect ratio preservation.

This component extends the languageSupport class, providing support for language services. Ensure the height and width inputs are valid and greater than 0.

Example :
```html
<upp-crop-image
    [image]="imageSource"
    [height]="200"
    [width]="200"
    (Cropped)="onImageCropped($event)">
</upp-crop-image>
Example :

Extends

languageSupport

Implements

OnInit AfterViewInit OnDestroy

Metadata

selector upp-crop-image
styleUrls ./upp-crop.scss
templateUrl ./upp-crop.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(lang: languageService, change: ChangeDetectorRef)

Constructs the UppCropComponent and injects the necessary services.

Parameters :
Name Type Optional Description
lang languageService No

Language service for multi-language support.
change ChangeDetectorRef No

Change detector for triggering view updates.

Inputs

height
Type : number
Default value : 0

The desired height of the cropped image. Must be greater than 0.
image
Type : any
Default value : null

Input image to be cropped. Can be of any type supported by the ngx-img-cropper library.
width
Type : number
Default value : 0

The desired width of the cropped image. Must be greater than 0.

Outputs

Cropped
Type : EventEmitter

Emits the cropped image in base64 format.

Methods

ngAfterViewInit
ngAfterViewInit()

Configures the cropper dimensions after the view is initialized.

Returns : void
ngOnDestroy
ngOnDestroy()

Cleans up resources when the component is destroyed.

Returns : void
ngOnInit
ngOnInit()

Initializes the component by setting up the cropper settings and validating inputs.

Returns : void
Public OnCrop
OnCrop(bounds: any)

Handles the crop event and stores the cropping bounds.

Parameters :
Name Type Optional Description
bounds any No

The bounds of the cropped image.
Returns : void
Public OnSave
OnSave()

Emits the cropped image in base64 format to the parent component.

Returns : void

Properties

Public _croppedHeight
Type : number
Default value : 0

Height of the cropped image in pixels.
Public _croppedImage
Type : any
Default value : {}

Stores the cropped image data.
Public _croppedWidth
Type : number
Default value : 0

Width of the cropped image in pixels.
Public _cropperSettings
Type : CropperSettings | null
Default value : null

Configuration settings for the image cropper. These settings control the cropper's behavior and appearance.
_imagecropbox
Type : ElementRef | null
Default value : null
Decorators :
@ViewChild('cropbox', {static: false})

Reference to the crop box element in the template. Used for dynamic sizing and rendering.
_imagecropper
Type : ImageCropperComponent | null
Default value : null
Decorators :
@ViewChild('cropper', {static: false})

Reference to the ngx-img-cropper component in the template. Used for interacting with the cropper API.

 
<div #cropbox class="cropper-box">
    <div *ngIf="_cropperSettings && _cropperSettings.canvasWidth !== 0">
        <img-cropper #cropper  uppDataid="cropper-image" [image]="_croppedImage" [settings]="_cropperSettings" (onCrop)="OnCrop($event)"></img-cropper>
    </div>
</div>
<ion-button uppDataid="cropper-submit" size="large" expand="block" color="primary" (click)="OnSave()">
    {{tr('@crop_accept_changes')}}
</ion-button>

./upp-crop.scss 

.cropper-box {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 6px;
    overflow: hidden;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""