Cropper doesn't produce a rounded cropper image

[Goutam192002]

So I am using this library to crop the picture in a rounded shape.

This is my code
HTML:

<img [src]="profile.picture" alt="profile photo">
<img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper>
<button class="btn btn-lg organizer-white-button" (click)="AfterCropTrigger()">Save</button>

TypeScript:

  @ViewChild('cropper', undefined) cropper: ImageCropperComponent;
cropperSettings: CropperSettings;
  data = {};
ngOnInit() {
this.cropperSettings = new CropperSettings();
    this.cropperSettings.width = 800;
    this.cropperSettings.height = 350;
    this.cropperSettings.croppedWidth = 800;
    this.cropperSettings.croppedHeight = 350;
    this.cropperSettings.canvasWidth = 800;
    this.cropperSettings.canvasHeight = 600;
    this.cropperSettings.minWidth = 800;
    this.cropperSettings.minHeight = 350;
    this.cropperSettings.noFileInput = true;
    this.cropperSettings.rounded = true;
    this.data = {};
}

AfterCropTrigger() {
this.profile.picture = this.data['image'];
}

The output