如何结合ngx-compress-image -image和ngx-image-cropper

npm install ngx-compress-image ngx-image-cropper

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxImageCompressService } from 'ngx-compress-image';
import { ImageCropperModule } from 'ngx-image-cropper';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ImageCropperModule
  ],
  providers: [NgxImageCompressService],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';
import { NgxImageCompressService } from 'ngx-compress-image';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  imageChangedEvent: any = '';
  croppedImage: any = '';
  compressedImage: any = '';

  constructor(private imageCompress: NgxImageCompressService) {}

  fileChangeEvent(event: any): void {
    this.imageChangedEvent = event;
  }

  imageCropped(event: any) {
    this.croppedImage = event.base64;
  }

  compressImage() {
    this.imageCompress.compressFile(this.croppedImage, -1, 50, 50).then(
      result => {
        this.compressedImage = result;
      }
    );
  }
}

<!-- app.component.html -->
<div>
  <input type="file" (change)="fileChangeEvent($event)" />
  <image-cropper
    [imageChangedEvent]="imageChangedEvent"
    [maintainAspectRatio]="true"
    [aspectRatio]="4 / 3"
    format="png"
    (imageCropped)="imageCropped($event)"
  ></image-cropper>
  <div *ngIf="croppedImage">
    <h3>Cropped Image</h3>
    <img [src]="croppedImage" />
    <button (click)="compressImage()">Compress Image</button>
  </div>
  <div *ngIf="compressedImage">
    <h3>Compressed Image</h3>
    <img [src]="compressedImage" />
  </div>
</div>