import { Component, OnInit, ComponentFactoryResolver, Injector, ViewChild, TemplateRef } from '@angular/core';
import { ImageCropperDialogComponent } from '../image-cropper-dialog/image-cropper-dialog.component';
import { BsModalService, BsModalRef } from '@farris/ui-modal';

@Component({
  selector: 'app-image-cropper-demo',
  templateUrl: './image-cropper-demo.component.html',
  styleUrls: ['./image-cropper-demo.component.scss']
})
export class ImageCropperDemoComponent implements OnInit {

  dlg: BsModalRef;
  @ViewChild('avatarDialogButton') avatarDialogButton: TemplateRef<any>;

  constructor(private cfr: ComponentFactoryResolver,
    private modalService: BsModalService,
        private injector: Injector,) { }

  ngOnInit() {
  }

    showDialog(){
        const cmpF = this.cfr.resolveComponentFactory(ImageCropperDialogComponent);
        const cmpR = cmpF.create(this.injector);
        this.dlg = this.modalService.show(cmpR, {
            title: '修改头像',
            width: 570, height: 520,
            buttons: [
                { text: '确定', cls: 'btn btn-primary',handle: () => {
                    console.log(this.dlg.content.croppedImage);

                } },
                { text: '取消', cls: 'btn btn-secondary', handle: () => {
                    this.dlg.close();
                } },
            ],
            
            showButtons: true
        });
    }

}

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { ImageTransform, ImageCroppedEvent, Dimensions } from 'projects/image-cropper/src/public-api';
import { NotifyService } from '@farris/ui-notify';

@Component({
  selector: 'app-image-cropper-dialog',
  templateUrl: './image-cropper-dialog.component.html',
  styleUrls: ['./image-cropper-dialog.component.scss']
})
export class ImageCropperDialogComponent implements OnInit {

  @ViewChild('file') file: ElementRef;

  imageChangedEvent: any = '';
  croppedImage: any = '';
  canvasRotation = 0;
  rotation = 0;
  scale = 100;
  showCropper = false;
  containWithinAspectRatio = false;
  transform: ImageTransform = {};
  imageURL: string = './assets/images/2.jpg';
  currentImgType = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg'];
  constructor(private notifyService: NotifyService) { }

  ngOnInit() {
  }
  fileChangeEvent(event: any): void {
    if(!event.target.files){
      return;
    }
    const fileType = event.target.files[0].type;
    const size = event.target.files[0].size / 1024 / 1024;
    if(this.currentImgType.indexOf(fileType) < 0){
      this.notifyService.error("图片格式不对");
      return;
    }
    else if(size>2){
      this.notifyService.error("文件过大");
      return;
    }
    else{
      this.imageChangedEvent = event;
    }
    //this.imageChangedEvent = event;
  }
  imageCropped(event: ImageCroppedEvent) {
    // console.log(event);
    this.croppedImage = event.base64;
  }
  imageLoaded() {
    this.showCropper = true;
      // console.log('Image loaded');
  }
  cropperReady(sourceImageDimensions: Dimensions) {
      // console.log('Cropper ready', sourceImageDimensions);
  }

  loadImageFailed() {
      // console.log('Load failed');
  }
  rotateLeft() {
      this.canvasRotation--;
      this.flipAfterRotate();
  }

  rotateRight() {
      this.canvasRotation++;
      this.flipAfterRotate();
  }
  private flipAfterRotate() {
      const flippedH = this.transform.flipH;
      const flippedV = this.transform.flipV;
      this.transform = {
          ...this.transform,
          flipH: flippedV,
          flipV: flippedH
      };
  }
  zoomOut() {
      if(this.scale <= 5) return;
      this.scale -= 5;
      this.transform = {
          ...this.transform,
          scale: this.scale/100
      };
  }

  zoomIn() {
      this.scale += 5;
      this.transform = {
          ...this.transform,
          scale: this.scale/100
      };
  }

  upload(){
    (this.file.nativeElement as HTMLInputElement).click();
  }

}