FarmMapsLib/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts

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");
    }
  }
}