Cropper.Blazor
Cropper.Blazor copied to clipboard
CropperBlazor
Image cropper doesn't seem to work on MAUI iOS
Describe the bug
When I try to call the await cropperComponent!.GetImageUsingStreamingAsync(imageFile, imageFile.Size); in MAUI iOS it seems to hang forever without any meaningful error messages to be seen anywhere. The weird thing is it works on the regular Blazor app (I have two projects, a regular Blazor and a Blazor MAUI hybrid), it works on android, and it works on the windows app version, but it fails on iOS both on a device and on a simulator.
The weird thing is that it used to work without any problem in the past and it popped up recently. I believe I updated both to .NET 8 and updated the package as well.
To Reproduce
- Create a MAUI project with the library imported
- Have an existing picture loaded into the cropper
- Create a component and use an InputFile Blazor component to get a picture from the device
- Try to get the image with ````await cropperComponent!.GetImageUsingStreamingAsync(imageFile, imageFile.Size);```
- Nothing happens and the async method just kepps "loading"
Expected behavior I expected the async method to eventually return but after 5 minutes I didn't wait any longer.
Smartphone:
- Device: iPhone 15 and 16
- OS: iOS 17.5 and iOS 18.1
- Package Version 1.3.1 and 1.3.4
Additional context When I construct my own data URL via streams and attept to update the Src property of the cropper then it loads the picture but in a semi unloaded state. It squishes the picture, doesn't diplay the cropper itself, can't be interacted with and can't export the image itself so it just gets stuck.
Thank you for this amazing package by the way and for your time if you are able to look into this. 😄 Cheers, Mark
Hi @MarkUngvari just try to not update Src property manually, just use appropriate method for that: https://cropperblazor.github.io/examples/replacing#simple-usage
I am facing the same issue. When initializing the Src property with a base64-formatted string the image loads, but in a zoomed-in and non-interactable state. It works perfectly on Android and Windows, the problem seems to be related to iOS devices. Moreover, I also figured out that "GetImageDataAsync" task never returns, as described by @MarkUngvari.
We are also using .NET 8 and the latest package version in a .NET MAUI Blazor hybrid app.
Cheers,
Manuel
I'm seeing a similiar issue on iOS blazor hybrid / dotnet 9.
If I provide an image source of a blob via the component Src property it renders the picture on the screen without any of the crop grid appearing so you can't really do anything. Then on that same image if I call await GetCroppedCanvasAsync() it just never returns / hangs indefintely. If I use ReplaceAsync to populate the Src instead of setting it manually as indicated above then the call to ReplaceAsync just hangs indefinitely and the image never loads.
Strangely enough I thought this was working initially, It was very slow to load an image using GetImageUsingStreamingAsync but it did eventually load and let me crop and save it. However I decided to try change how I load the image to make it faster (using native file read instead of IBrowserFile, which is WAY faster) and now nothing works. Doesn't even work if I got back to the original setup I can't make it work again.
Edit:
I pulled the repo and compiled from source in the debug configuration just to see if it would reveal an exception or something, but it worked just fine. On my first try on iOS 18.3 in blazor hybrid / MAUI it pulled up the image and showed the correct cropping screen and was fully functional and then successfuly saved it out as a .webp image. Not sure why it is working to be honest, but i'll play around with it some more.
Hi @seth-tc, @MarkUngvari, @ManuLin sorry, I didn't have iPhone device to test it. Maybe you can share error/stack trace with me. Now that library was released for .NET 9!
Hi @seth-tc, @MarkUngvari, @ManuLin sorry, I didn't have iPhone device to test it. Maybe you can share error/stack trace with me. Now that library was released for .NET 9!
In my situation there was no error or stack trace, the application simply hangs. For this reason, I tried to compile it from source so I could see exactly where it was hanging but when I built it locally my issue no longer occurred. It's possible that the cause of the issue was already fixed on the dev branch, which I pulled, but not on the nuget release.
At this point I am running 2 different versions of the library - Android (blazor hybrid) and web (blazor wasm) are running 1.3.4 via the nuget package, and iOS is running from the library I built a couple weeks ago. It's been working great.
Also to finish my previous mention of loading speeds on android / iOS blazor hybrid - I found that using the native platform method provided by MAUI to load images was much faster than using the webview to load files. So i load the images via MediaPicker.PickPhotoAsync, which gives me the file path, then I use File.OpenRead to read in as as a stream, then pass the raw byte[] to javascript via js interop to get a blob url, then pass that url to Cropper.Blazor. It sounds burdensome but it is a lot faster compared to selecting the file using the blazor InputFile component.
@MarkUngvari I suppose it can be related with not compatible version some libraries in your project which related with Microsoft.AspNetCore.Components.Web version inside library. I see the similar unhandled exception in Android devices when version of Maui controls and blazor packages not compatible in runtime or even get a version incompatibility warning.
In addition, that can help to resolve mentioned problem:
Hu @MarkUngvari what about new endpoint regarding cropping images in background: https://cropperblazor.github.io/examples/cropping#crop-in-background? Do we see that bug for this functionality
I suppose that solution can resolve issue with WebView in MAUI for IOS platform: https://stackoverflow.com/questions/79493790/maui-blazor-create-temp-image-to-use-with-cropper-blazor-ios Let me know, if you see some issues!