圖像裁剪器不保存 Angular 中的裁剪圖像

Question

我正在使用ngx-image-cropper

import { ImageCroppedEvent, ImageTransform } from 'ngx-image-cropper';
user={ ..
};
image: any = '';
croppedImage: any = '';
transform: ImageTransform = {};
scale = 1;
showCropper = false;
profilePicUpload(e): void {
    this.imageChangedEvent = e;
    this.image  = e.target.files[0];
  }

  imageCropped(event: ImageCroppedEvent) {
    this.user.photo = event.base64;
    this.croppedImage = event.base64.substring(22);
  }
  imageLoaded() {
    this.showCropper = true;
  }

async addImg() {

 if(this.image){ 
      const path  = await this.UploadService.uploadFile(this.image);
      await new Promise(f => setTimeout(f, 2000));
      this.user.photo = '';
      this.user.photo += path;
     } 
}

使用此代碼上傳圖像，但問題是未保存裁剪的圖像，但保存了原始圖像。

任何解決方案謝謝

Answer 1

也許您應該上傳裁剪后的圖像this.croppedImage ？

this.UploadService.uploadFile(this.croppedImage);