0

我在一个角度项目上使用图像裁剪器。

文档：https ://www.npmjs.com/package/ngx-image-cropper

页面上有几张图片，由循环 *ngIf="field.type === 'images'" 加载，并显示在 [imageURL] 的 image-cropper 标签中。图像在 Origin 中正确显示，但预览字段随机显示不同的照片。当所有预览中的 (imageCropped)="imageCropped($event)" 事件更改为更改的照片。

如何使 Origin 和 Preview 具有相同的照片，并且在 Preview 中的 imageCropped($event) 时，只有那张照片会发生变化？

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>

4

0 回答 0