How to replay the cropping process on an array of images? about ngx-image-cropper HOT 4 CLOSED

import {Component, ViewChild} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {CropperPosition, ImageCropperComponent, ImageTransform} from 'ngx-image-cropper';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="loadImage()">Load Image</button>
    <button (click)="zoomIn()">Zoom In</button>
    <button (click)="zoomOut()">Zoom Out</button>
    <button (click)="crop()">Run Crop Gif</button>

    <div class="cropper-wrapper">
      <image-cropper
        #imageCropperRef
        [imageURL]="imageUrl"
        [autoCrop]="false"
        [maintainAspectRatio]="false"
        [(transform)]="transform"
        [cropper]="cropper"
        (cropperReady)="cropperReady()"
      ></image-cropper>
    </div>

    <ng-container *ngIf="!loading">
      <div *ngFor="let frame of croppedImages">
        <img [src]="frame" />
      </div>
    </ng-container>
  `,
  styles: [
    `
      image-cropper {
        max-height: 50vh;
      }

      .cropper-wrapper {
        min-height: 300px;
        position: relative;
      }
    `,
  ],
})
export class AppComponent {
  @ViewChild('imageCropperRef') imageCropperRef?: ImageCropperComponent;

  croppedImages: any[] = [];

  imageUrl?: string;
  imageUrls = ['assets/cat_1.jpg', 'assets/cat_2.jpg', 'assets/cat_3.jpg'];
  loadCursor = 0;

  scale = 1;
  transform: ImageTransform = {
    translateUnit: 'px',
  };

  cropper: CropperPosition = {
    x1: 0,
    y1: 0,
    x2: 160,
    y2: 160,
  };

  loading = false;

  cacheTransform: ImageTransform = {
    translateUnit: 'px',
  };

  cacheCropper: CropperPosition = {
    x1: 0,
    y1: 0,
    x2: 160,
    y2: 160,
  };

  constructor(private sanitizer: DomSanitizer) {}

  loadImage() {
    if (this.loadCursor < this.imageUrls.length) {
      this.imageUrl = this.imageUrls[this.loadCursor];
    }
  }

  addCropped() {
    const event = this.imageCropperRef?.crop('base64'); // Using Blob will return a Promise.

    if (event) {
      const url = this.sanitizer.bypassSecurityTrustUrl(event.objectUrl || event.base64 || '');
      this.croppedImages.push(url);
    }
  }

  cropperReady() {
    if (this.loading) {
      this.transform = {...this.cacheTransform};
      this.cropper = {...this.cacheCropper};

      setTimeout(() => {
        // If there is no setTimeout, the changes to the cropper will not take effect.
        this.addCropped();
        this.loadNextImage();
      }, 0);
    }
  }

  loadNextImage() {
    this.loadCursor++;

    if (this.loadCursor >= this.imageUrls.length) {
      this.loadCursor = 0;
      this.loading = false;
    }

    this.loadImage();
  }

  zoomOut() {
    this.scale -= 0.1;
    this.transform = {
      ...this.transform,
      scale: this.scale,
    };
  }

  zoomIn() {
    this.scale += 0.1;
    this.transform = {
      ...this.transform,
      scale: this.scale,
    };
  }

  crop() {
    this.loading = true;
    this.croppedImages = [];
    this.cacheTransform = {...this.transform};
    this.cacheCropper = {...this.cropper};
    this.addCropped();
    this.loadNextImage();
  }
}