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

Question

我想上传一个图像，通过让用户选择使用input[type=file]压缩它，有预览，然后让用户裁剪图像，并将其发布到API端点

我可以通过ngx-compress-image选择图像并对其进行压缩，压缩后的图像将在预览中显示出来。但是现在我想把这个压缩的图像传递给ngx-image-cropper，它需要一个FileEvent事件。如何有问题地传递压缩后的图像

<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

以防其他人会寻找组合这些插件的解决方案。裁剪堵塞也暴露了其他@Inputs()。所以我像下面这样使用了base64。

<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" />