Image crops to bad quality image

[renilbabu03]

I used this library to crop the image but the cropped image has astoundingly poor quality. I tried again by going through the similar issue here but failed to fix it.
My HTML
<img-cropper [image]="data1" [settings]="cropperSettings1" (onCrop)="cropped($event)"></img-cropper>

And my typescript configuration

this.cropperSettings1 = new CropperSettings();
    //cropper width
    this.cropperSettings1.width = 200;
    this.cropperSettings1.height = 200;

    //resulting image width / height
    this.cropperSettings1.croppedWidth = 100;
    this.cropperSettings1.croppedHeight = 30;

    this.cropperSettings1.canvasWidth = 500;
    this.cropperSettings1.canvasHeight = 300;
    
    //min width of chopper
    this.cropperSettings1.minWidth = 100;
    this.cropperSettings1.minHeight =30;

    this.cropperSettings1.rounded = false;
    this.cropperSettings1.keepAspect = false;

    this.cropperSettings1.cropperDrawSettings.strokeColor = 'rgba(255,255,255,1)';
    this.cropperSettings1.cropperDrawSettings.strokeWidth = 1;

    this.cropperSettings1.minWithRelativeToResolution = false
    
    // this.cropperSettings1.preserveSize = true;
    // this.cropperSettings1.cropOnResize = false;
    // this.cropperSettings1.compressRatio = 5;
    // this.angularCropper.cropper.zoom(0.1);
    
    this.data1 = {};

I want to crop the image to 100x30 pixel without compromising the quality of the image.

I also tried to open the demo app but is not opening. After doing
npm run all. its giving me the following error

Also the resolution of the image is degraded...Can you help me in this..