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

Question

我想上传图像，让用户使用input[type=file]压缩到 select 压缩它，进行预览，然后让用户裁剪图像并将其发布到 API 端点

<input type='file' onchange='compress($event)>到目前为止，我能够 select 图像并通过ngx-compress-image压缩它，压缩图像显示在预览中。 但现在我想将此压缩图像传递给需要FileEvent事件的ngx-image-cropper cropper。 我如何有问题地传递压缩图像

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