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

49 lines
1.8 KiB
TypeScript

import { Component, ViewChild } from '@angular/core';
import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
import { KeyValueRatio } from '../../../../../bizmatch-server/src/models/main.model';
import { ImageService } from '../../services/image.service';
import { LoadingService } from '../../services/loading.service';
import { SharedModule } from '../../shared/shared/shared.module';
export const stateOptions: KeyValueRatio[] = [
{ label: '16/9', value: 16 / 9 },
{ label: '1/1', value: 1 },
{ label: 'Free', value: NaN },
];
@Component({
selector: 'app-image-cropper',
standalone: true,
imports: [SharedModule, AngularCropperjsModule],
templateUrl: './image-cropper.component.html',
styleUrl: './image-cropper.component.scss',
})
export class ImageCropperComponent {
@ViewChild(CropperComponent) public angularCropper: CropperComponent;
imageUrl: string; //wird im Template verwendet
value: number = stateOptions[0].value;
cropperConfig = { aspectRatio: this.value };
ratioVariable: boolean;
stateOptions = stateOptions;
constructor(private loadingService: LoadingService, private imageUploadService: ImageService) {}
// 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.fileUpload.clear();
// this.ref.close(this.angularCropper.cropper);
// }
// cancelUpload() {
// this.fileUpload.clear();
// this.ref.close();
// }
changeAspectRation(ratio: number) {
this.cropperConfig = { aspectRatio: ratio };
this.angularCropper.cropper.setAspectRatio(ratio);
}
}