Persist CSS details/data for cropped image when tabs are switched using MudTab

[JunaidSultan20]

Describe the bug
After cropping the original image, the newly cropped image is displayed on the UI. However, when I switch between the tabs, the CSS details for the cropped image are reset to 0px. The data or details persist for the original tab where the image is cropped but are lost when the tab is switched. Also, can we send multiple CSS classes? If so, how can be they assigned either using an array or comma separated string.

To Reproduce
Steps to reproduce the behavior:

1. Upload the original image.
2. Select the desired area of the image and crop it.
3. Observe that the cropped image is correctly displayed in the UI.
4. Switch to another tab and observe the images are not displayed.
5. Now switch back to the original tab and observe that the cropped image is visible.

Expected behavior
The copped image should be displayed when tabs are switched, and the style and CSS details should persist. Whenever I switch the tabs the cropped image should persist/visible on all tabs.

Screenshots

Code Snippet
Options = new Options() { AspectRatio = CropperWindowWidth / CropperWindowHeight, ViewMode = ViewMode.Vm0, CorrelationId = Guid.NewGuid().ToString(), Preview = PreviewClass, AutoCrop = true, DragMode = "move" };

Desktop (please complete the following information):

• OS: [Windows 10]
• Browser [Edge]
• Version [116.0.1938.69]

[JunaidSultan20]

My findings are that the cropped image is shown in the preview div that is available in the DOM. If that preview is not visible/available in the current tab or DOM, the image is not rendered.

[MaxymGorn]

Hi @JunaidSultan20 . I you wanna persist image cropper preview after destroying cropper component(case when you change tabs) you need get image from preview or using GetCroppedCanvasDataURLAsync method cropper component for saving image as base64 and use it. Example getting image:

Cropper.Blazor/src/Cropper.Blazor/Client/Pages/CropperDemo.razor.cs

Line 356 in 5b8369f

string croppedCanvasDataURL = await CropperComponent!.GetCroppedCanvasDataURLAsync(getCroppedCanvasOptions);

Moreover, if you need a fully persist cropper component metadata with image (not preview image), you can go through this conversation:
#182

Css styles can be viewed on the demo site or on the site of the original cropper.js library, I think this is quite enough. You can setup whatever!