I am using image-cropper on an angular project.
Documentation: https://www.npmjs.com/package/ngx-image-cropper
There are several images on the page, which are loaded by the loop *ngIf="field.type === 'images'" and displayed in the image-cropper tag in [imageURL] . The images are displayed correctly in Origin, but the Preview field randomly displays different photos. When (imageCropped)="imageCropped($event)" event in all Preview changes to the changed photo.
How do I make Origin and Preview have the same photo, and when imageCropped($event) in Preview, only that photo changes?
import { Component } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-image-uploader';
imageChangedEvent: any = '';
croppedImage: any = '';
fileChangeEvent(event: any): void {
this.imageChangedEvent = event;
}
imageCropped(event: ImageCroppedEvent) {
this.croppedImage = event.base64;
}
imageLoaded() {
// show cropper
}
cropperReady() {
// cropper ready
}
loadImageFailed() {
// show message
}
}<div class="edit-window__wrapper" *ngIf="field.type === 'images'">
<div class="edit-window__origin">
<p>Origin</p>
<image-cropper
[imageURL]="imageComplexForm.controls[field.fields.file.key].value.path"
[maintainAspectRatio]="false"
[aspectRatio]="4 / 4"
[resizeToWidth]="256"
format="png"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"
></image-cropper>
</div>
<div class="edit-window__preview>
<p>Preview</p>
<img [src]="croppedImage" />
</div>
</div>