Page is freezes

[DiamondKesha]

BlazorWebAssembly .NET 8, MudBlazor 7.15.0, Cropper.Blazor 1.3.4.

What causes the tab to die when opening a MudDialog along with a CropperComponent? There are two scenarios when a tab dies (freezes). Can you please tell me what I'm doing wrong? How can I fix it?

1. When ZoomOnWheel is True and im try zoom cropped canvas:
   Code:

<MudDialog >
    <TitleContent>
        <MudText Typo="Typo.h6">
            <MudIcon Icon="@Icons.Material.Filled.ImageAspectRatio" Class="mr-3 mb-n1" />
            Upload avatar
        </MudText>
    </TitleContent>

    <DialogContent>
        <div class="img-container">
            <CropperComponent Class="img-cropper" Src="@("data:image/jpeg;base64," + ImageSrc)"
                              Options="options" OnCropEvent="OnCropEvent" 
                              @ref="cropperComponent" />
        </div>        
    </DialogContent>

    <DialogActions>
        <MudButton Color="Color.Error" OnClick="Cancel">Close</MudButton>
        <MudButton OnClick="Confirm">Load</MudButton>
    </DialogActions>
</MudDialog>

@code {
    [CascadingParameter]
    private MudDialogInstance MudDialog { get; set; }

    [Parameter]
    public string ImageSrc { get; set; }

    private CropperComponent? cropperComponent = null!;

    private Options options = new Options()
    {
        SetDataOptions = new SetDataOptions
        {
            Width = minCroppedWidth,
                Height = minCroppedHeight
        },
      //  MinCropBoxHeight = 128,
      //  MinCropBoxWidth = 128,
      //  ZoomOnTouch = false,
        ZoomOnWheel = false,
        DragMode = "move",
        Movable = true,
       // Background = false,
     //   Responsive = false,
     
        ViewMode = ViewMode.Vm3
    };

    private static decimal minCroppedWidth = 512;
    private static decimal minCroppedHeight = 512;
    private static decimal maxCroppedWidth = 512;
    private static decimal maxCroppedHeight = 512;

    public async void OnCropEvent(JSEventData<CropEvent> cropJSEvent)
    {
        await InvokeAsync(() =>
        {
            if (cropJSEvent?.Detail is not null)
            {
                decimal width = Math.Round(cropJSEvent.Detail.Width ?? 0);
                decimal height = Math.Round(cropJSEvent.Detail.Height ?? 0);

                if (width < minCroppedWidth || height < minCroppedHeight
                    || width > maxCroppedWidth || height > maxCroppedHeight)
                {
                    decimal nWidth = Math.Max(minCroppedWidth,
                        Math.Min(maxCroppedWidth, width));
                    decimal nHeight = Math.Max(minCroppedHeight,
                        Math.Min(maxCroppedHeight, height));

                    cropperComponent!.SetData(new SetDataOptions
                        {
                            Width = nWidth,
                            Height = nHeight
                        });
                }
            }
        });
    }

    private void Cancel() => MudDialog.Cancel();

    private async Task Confirm() 
    {
        GetCroppedCanvasOptions getCroppedCanvasOptions = new GetCroppedCanvasOptions
        {
            MaxHeight = 512,
            MaxWidth = 512,
            MinHeight = 512,
            MinWidth = 512,
            Height = 512,
            Width = 512,
            ImageSmoothingQuality = ImageSmoothingQuality.High.ToEnumString()
        };

        var croppedCanvasDataURL = await cropperComponent!.GetCroppedCanvasDataURLAsync(getCroppedCanvasOptions);

        MudDialog.Close(DialogResult.Ok(croppedCanvasDataURL.Decode().base64ImageData));
    }
} 

2. When i'm set size 1300x720 for cover and just open muddialog

<MudDialog >
    <TitleContent>
        <MudText Typo="Typo.h6">
            <MudIcon Icon="@Icons.Material.Filled.ImageAspectRatio" Class="mr-3 mb-n1" />
            Upload cover
        </MudText>
    </TitleContent>

    <DialogContent>
        <div class="img-container">
            <CropperComponent Class="img-cropper" Src="@("data:image/jpeg;base64," + ImageSrc)"
                              Options="options" OnCropEvent="OnCropEvent" 
                              @ref="cropperComponent" />
        </div>        
    </DialogContent>

    <DialogActions>
        <MudButton Color="Color.Error" OnClick="Cancel">Close</MudButton>
        <MudButton OnClick="Confirm">Load</MudButton>
    </DialogActions>
</MudDialog>

@code {
    [CascadingParameter]
    private MudDialogInstance MudDialog { get; set; }

    [Parameter]
    public string ImageSrc { get; set; }

    private CropperComponent? cropperComponent = null!;

    private Options options = new Options()
    {
        SetDataOptions = new SetDataOptions
        {
            Width = minCroppedWidth,
                Height = minCroppedHeight
        },
      //  MinCropBoxHeight = 128,
      //  MinCropBoxWidth = 128,
      //  ZoomOnTouch = false,
        ZoomOnWheel = false,
        DragMode = "move",
        Movable = true,
       // Background = false,
     //   Responsive = false,
     
        ViewMode = ViewMode.Vm3
    };

    private static decimal minCroppedWidth = 1700;
    private static decimal minCroppedHeight = 320;
    private static decimal maxCroppedWidth = 1700;
    private static decimal maxCroppedHeight = 320;

    public async void OnCropEvent(JSEventData<CropEvent> cropJSEvent)
    {
        await InvokeAsync(() =>
        {
            if (cropJSEvent?.Detail is not null)
            {
                decimal width = Math.Round(cropJSEvent.Detail.Width ?? 0);
                decimal height = Math.Round(cropJSEvent.Detail.Height ?? 0);

                if (width < minCroppedWidth || height < minCroppedHeight
                    || width > maxCroppedWidth || height > maxCroppedHeight)
                {
                    decimal nWidth = Math.Max(minCroppedWidth,
                        Math.Min(maxCroppedWidth, width));
                    decimal nHeight = Math.Max(minCroppedHeight,
                        Math.Min(maxCroppedHeight, height));

                    cropperComponent!.SetData(new SetDataOptions
                        {
                            Width = nWidth,
                            Height = nHeight
                        });
                }
            }
        });
    }

    private void Cancel() => MudDialog.Cancel();

    private async Task Confirm() 
    {
        GetCroppedCanvasOptions getCroppedCanvasOptions = new GetCroppedCanvasOptions
        {
            MaxHeight = 320,
            MaxWidth = 1700,
            MinHeight = 320,
            MinWidth = 1700,
            Height = 320,
            Width = 1700,
            ImageSmoothingQuality = ImageSmoothingQuality.High.ToEnumString()
        };

        var croppedCanvasDataURL = await cropperComponent!.GetCroppedCanvasDataURLAsync(getCroppedCanvasOptions);

        MudDialog.Close(DialogResult.Ok(croppedCanvasDataURL.Decode().base64ImageData));
    }
}

Script terminated by timeout at:
f/<@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:4950
z/<@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:4462
z@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:4440
f@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:4909
renderCropBox@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:14223
setCropBoxData@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:27555
setData@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:26436
setData@https://localhost:7002/_content/Cropper.Blazor/cropperJsInterop.min.js:1:2789
beginInvokeJSFromDotNet/i<@https://localhost:7002/_framework/blazor.webassembly.js:1:2878
beginInvokeJSFromDotNet@https://localhost:7002/_framework/blazor.webassembly.js:1:2835
vn@https://localhost:7002/_framework/blazor.webassembly.js:1:58849
Tl</S<@https://localhost:7002/_framework/dotnet.runtime.8.0.7.clmdsey30c.js:3:178365
Tl<@https://localhost:7002/_framework/dotnet.runtime.8.0.7.clmdsey30c.js:3:179198
@:wasm-function[3]:0x0
@:wasm-function[349]:0x1fafb
@:wasm-function[245]:0x1bf9f
@:wasm-function[238]:0xf16c
@:wasm-function[272]:0x1d1bd
@:wasm-function[3185]:0xe8756
@:wasm-function[2505]:0xbe4ac
@:wasm-function[2511]:0xbecd0
@:wasm-function[2535]:0xc1327
@:wasm-function[128]:0xa4fa
createDotnetRuntime/Module._mono_wasm_invoke_method_bound@https://localhost:7002/_framework/dotnet.native.8.0.7.909ctfkgxp.js:8:123345
kr@https://localhost:7002/_framework/dotnet.runtime.8.0.7.clmdsey30c.js:3:35365
Tl</U<@https://localhost:7002/_framework/dotnet.runtime.8.0.7.clmdsey30c.js:3:180962
beginInvokeDotNetFromJS@https://localhost:7002/_framework/blazor.webassembly.js:1:45108
invokeDotNetMethodAsync@https://localhost:7002/_framework/blazor.webassembly.js:1:3956
invokeMethodAsync@https://localhost:7002/_framework/blazor.webassembly.js:1:5464
onCrop@https://localhost:7002/_content/Cropper.Blazor/cropperJsInterop.min.js:1:5070
initCropper/options.crop@https://localhost:7002/_content/Cropper.Blazor/cropperJsInterop.min.js:1:5958
y@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:6783
output@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:14429
renderCropBox@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:14386
setCropBoxData@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:27555
crop@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:22195
value@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:36535
t@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:33402
value@https://localhost:7002/_content/Cropper.Blazor/cropper.min.js:10:33584

[MaxymGorn]

Hi @DiamondKesha. You need to handle invalid values ​​yourself (or not to allow such) or as we do on the demo page: https://cropperblazor.github.io/demo. Additionally, we use overrides internal cropper blazor library js function on our Zoom Ratio Settings from that file: https://github.com/CropperBlazor/Cropper.Blazor/blob/dev/src/Cropper.Blazor/Client/wwwroot/overrideCropperJsInteropModule.js