image-cropper component, drag & drop bilder

bizmatch/src/app/components/image-cropper/image-cropper.component.html

@@ -0,0 +1,15 @@
+<angular-cropper #cropper [imageUrl]="imageUrl" [cropperOptions]="cropperConfig"></angular-cropper>
+<div class="flex justify-content-between mt-3">
+    @if(ratioVariable){
+    <div>
+        <p-selectButton [options]="stateOptions" [ngModel]="value" (ngModelChange)="changeAspectRation($event)"
+            optionLabel="label" optionValue="value"></p-selectButton>
+    </div>
+    } @else {
+    <div></div>
+    }
+    <div>
+        <p-button icon="pi" (click)="cancelUpload()" label="Cancel" [outlined]="true"></p-button>
+        <p-button icon="pi pi-check" (click)="sendImage()" label="Finish" pAutoFocus [autofocus]="true"></p-button>
+    </div>
+</div>

bizmatch/src/app/components/image-cropper/image-cropper.component.ts

@@ -0,0 +1,64 @@
+import { Component, ViewChild } from '@angular/core';
+import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
+import { LoadingService } from '../../services/loading.service';
+import { ImageService } from '../../services/image.service';
+import { HttpEventType } from '@angular/common/http';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { FileUpload, FileUploadModule } from 'primeng/fileupload';
+import { environment } from '../../../environments/environment';
+import { KeyValueRatio, User } from '../../../../../common-models/src/main.model';
+import { SharedModule } from '../../shared/shared/shared.module';
+import { SelectButtonModule } from 'primeng/selectbutton';
+export const stateOptions:KeyValueRatio[]=[
+  {label:'16/9',value:16/9},
+  {label:'1/1',value:1},
+  {label:'2/3',value:2/3},
+]
+@Component({
+  selector: 'app-image-cropper',
+  standalone: true,
+  imports: [SharedModule,FileUploadModule,AngularCropperjsModule,SelectButtonModule],
+  templateUrl: './image-cropper.component.html',
+  styleUrl: './image-cropper.component.scss'
+})
+export class ImageCropperComponent {
+  @ViewChild(CropperComponent) public angularCropper: CropperComponent;
+  imageUrl:string; //wird im Template verwendet
+  fileUpload:FileUpload
+  value:number = stateOptions[0].value;
+  cropperConfig={aspectRatio: this.value}  
+  ratioVariable:boolean
+  stateOptions=stateOptions
+  constructor(
+    private loadingService:LoadingService,
+    private imageUploadService: ImageService,    
+    public config: DynamicDialogConfig,
+    public ref: DynamicDialogRef
+  ){}
+  ngOnInit(): void {
+    if (this.config.data) {
+        this.imageUrl = this.config.data.imageUrl;
+        this.fileUpload = this.config.data.fileUpload;
+        this.cropperConfig = this.config.data.config ? this.config.data.config: this.cropperConfig;
+        this.ratioVariable = this.config.data.ratioVariable;
+    }
+  }
+  sendImage(){
+    this.loadingService.startLoading('uploadImage');   
+    setTimeout(()=>{
+      this.angularCropper.cropper.getCroppedCanvas().toBlob(async(blob) => {
+        this.fileUpload.clear()
+        this.ref.close(blob);
+      }, 'image/png');  
+    })
+  }  
+
+  cancelUpload(){
+    this.fileUpload.clear();
+    this.ref.close();
+  }
+  changeAspectRation(ratio:number){
+    this.cropperConfig={aspectRatio: ratio}
+    this.angularCropper.cropper.setAspectRatio(ratio);
+  }
+}