Error: Failed to get Blob for transformed image.

[ecancil]

I've recently moved the image cropper into a modal window and I started getting this error

Error: Failed to get Blob for transformed image.

This is the HTML, which worked fine inline outside of the modal

<mat-dialog-content class="centered-dialog-content-vertical-top">
    @if(data){
        <image-cropper 
            [imageBase64]="data.mediaLocation" 
            [output]="'base64'" 
            [maintainAspectRatio]="false"
            [aspectRatio]="elRef.nativeElement.offsetWidth / elRef.nativeElement.offsetHeight" 
            [containWithinAspectRatio]="true"
            (imageCropped)="imageCropped($event)" 
            (imageLoaded)="imageLoaded($event)" 
            (cropperReady)="cropperReady()"
            (loadImageFailed)="loadImageFailed($event)">
        </image-cropper>
    }
</mat-dialog-content>

It seems to be encountering the error here, but I'm struggling to understand what the difference may be by just moving it to a modal

    const blob = await new Promise(resolve => canvas.toBlob(resolve, cropperSettings.format));
    if (!blob) {
      throw new Error('Failed to get Blob for transformed image.');
    }

Appreciate any input or help

[ecancil]

Just for others that may run into this, it's when you send a faulty aspect ratio in, it fails