Image cropper not saving cropped Image in Angular

Question

I'm using 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;
     } 
}

using this code to upload image but issue is the cropped image is not saved but the original image is saved.

Any solution Thanks

Answer 1

Maybe you should upload the cropped image this.croppedImage?

this.UploadService.uploadFile(this.croppedImage);

Answer 2

this.croppedImageUrl = this.sanitizer.bypassSecurityTrustUrl(event.objectUrl);

try this

source : https://github.com/Mawi137/ngx-image-cropper/releases/tag/7.0.0