74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { Component, OnInit,ViewChild,ElementRef,EventEmitter, Output } from '@angular/core';
|
|
import { HttpClient, HttpParams,HttpHeaders } from "@angular/common/http";
|
|
import {NgbModal} from "@ng-bootstrap/ng-bootstrap"
|
|
import { ImageCroppedEvent,LoadedImage } from 'ngx-image-cropper';
|
|
import {ImageService } from '../../services/image.service';
|
|
|
|
@Component({
|
|
selector: 'fm-edit-image-modal',
|
|
templateUrl: './edit-image-modal.component.html',
|
|
styleUrls: ['./edit-image-modal.component.scss']
|
|
})
|
|
export class EditImageModalComponent implements OnInit {
|
|
|
|
@Output() changed = new EventEmitter();
|
|
@ViewChild('upload_modal') modal:ElementRef;
|
|
|
|
constructor(private modalService: NgbModal,public imageService:ImageService) { }
|
|
|
|
isImageLoaded = false;
|
|
aspectRatio:number = 4/3;
|
|
imageChangedEvent: any = '';
|
|
croppedImage = '';
|
|
endpointUrl:string = null;
|
|
imageUrl:string = null;
|
|
maxWidth = 200;
|
|
roundImage = false;
|
|
imageType = "jpeg";
|
|
saveImage = true;
|
|
|
|
ngOnInit(): void {
|
|
}
|
|
|
|
open(endpoint:string,aspectRatio:number,roundImage?:boolean,maxWidth?:number,saveImage?:boolean, imageType?:string) {
|
|
this.endpointUrl = endpoint;
|
|
this.imageUrl = endpoint;
|
|
this.aspectRatio= aspectRatio;
|
|
this.roundImage = roundImage === undefined?this.roundImage:roundImage;
|
|
this.maxWidth = maxWidth === undefined?this.maxWidth:maxWidth;
|
|
this.imageType = imageType === undefined?this.imageType:imageType.substr(6);
|
|
this.saveImage = saveImage === undefined?this.saveImage:saveImage;
|
|
this.modalService.open(this.modal,{ size: 'lg' });
|
|
}
|
|
|
|
fileChangeEvent(event: any): void {
|
|
this.imageChangedEvent = event;
|
|
}
|
|
imageCropped(event: ImageCroppedEvent) {
|
|
this.croppedImage = event.base64;
|
|
}
|
|
imageLoaded(image: LoadedImage) {
|
|
this.isImageLoaded=true;
|
|
}
|
|
cropperReady() {
|
|
// cropper ready
|
|
}
|
|
loadImageFailed() {
|
|
// show message
|
|
}
|
|
|
|
save() {
|
|
if(this.croppedImage) {
|
|
const blob = this.imageService.dataUrltoBlob(this.croppedImage);
|
|
if(this.saveImage) {
|
|
this.imageService.putImage(this.endpointUrl,blob).subscribe(() => {
|
|
this.changed.emit({});
|
|
});
|
|
} else {
|
|
this.changed.emit({ "croppedImage": this.imageService.blobToFile(blob,"croppedimage.jpg")} );
|
|
}
|
|
this.modalService.dismissAll("Save");
|
|
}
|
|
}
|
|
}
|