63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import {Component, inject, input} from '@angular/core';
|
|
import {ImageCroppedEvent, ImageCropperComponent, LoadedImage} from 'ngx-image-cropper';
|
|
import {DomSanitizer, SafeUrl} from '@angular/platform-browser';
|
|
import {UserApiService} from '../user-api.service';
|
|
import {MAT_DIALOG_DATA, MatDialogContent} from '@angular/material/dialog';
|
|
|
|
@Component({
|
|
selector: 'app-dialog-cropp-image.component',
|
|
imports: [
|
|
ImageCropperComponent,
|
|
MatDialogContent
|
|
],
|
|
templateUrl: './dialog-cropp-image.component.html',
|
|
styleUrl: './dialog-cropp-image.component.scss'
|
|
})
|
|
export class DialogCroppImageComponent {
|
|
|
|
imageChangedEvent: Event | null = null;
|
|
croppedImage: SafeUrl = '';
|
|
|
|
image?: string;
|
|
imageCropUrl: string | undefined;
|
|
|
|
constructor(
|
|
private userApiService: UserApiService,
|
|
private sanitizer: DomSanitizer,
|
|
|
|
) {
|
|
this.cropImage(this.imageCropUrl);
|
|
}
|
|
|
|
///------------
|
|
|
|
fileChangeEvent(event: Event): void {
|
|
this.imageChangedEvent = event;
|
|
}
|
|
imageCropped(event: ImageCroppedEvent) {
|
|
if (event.objectUrl != null) {
|
|
this.croppedImage = this.sanitizer.bypassSecurityTrustUrl(event.objectUrl);
|
|
}
|
|
// event.blob can be used to upload the cropped image
|
|
}
|
|
imageLoaded(image: LoadedImage) {
|
|
// show cropper
|
|
}
|
|
cropperReady() {
|
|
// cropper ready
|
|
}
|
|
loadImageFailed() {
|
|
// show message
|
|
}
|
|
|
|
cropImage(url: string | undefined) {
|
|
if(url !== undefined){
|
|
this.userApiService.loadImageAsBase64(url).subscribe(data => {
|
|
this.image = data;
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
}
|