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

Question

I want to upload an image, by letting user to select using input[type=file] compress it, have a preview and then let user crop the image and post it to API endpoint

<input type='file' onchange='compress($event)> do far I am able to select the image and compress it via ngx-compress-image the compress image is being shown in the preview. but now i want to pass this compressed image to ngx-image-cropper which expects a FileEvent event. how do i problematically pass the compressed image

<input type="file" (change)="fileChangeEvent($event)" />

<image-cropper
    [imageChangedEvent]="imageChangedEvent"
    [maintainAspectRatio]="true"
    [aspectRatio]="4 / 3"
    format="png"
    (imageCropped)="imageCropped($event)"
    (imageLoaded)="imageLoaded()"
    (cropperReady)="cropperReady()"
    (loadImageFailed)="loadImageFailed()"
></image-cropper>

<img [src]="croppedImage" />

Answer 1

In case someone else would look a solution to combine these plugins. The cropper plugging has other @Inputs() exposed as well. so i used the base64 like below.

<image-cropper
    [imageBase64]="ImageToCrop" // <----- added this
    [maintainAspectRatio]="true"
    [aspectRatio]="4 / 3"
    format="png"
    (imageCropped)="imageCropped($event)"
    (imageLoaded)="imageLoaded()"
    (cropperReady)="cropperReady()"
    (loadImageFailed)="loadImageFailed()"
></image-cropper>

<img [src]="croppedImage" />