iosblazormauicropper

MAUI Blazor Create temp image to use with cropper blazor iOS


iOS

I'm creating an app that has the ability to change their profile picture. I want to load an image from the media library and use it in Cropper.Blazor.

Cropper HTML

<CropperComponent Class="temp-image" Src="/images/tempimage.jpg" @ref="cropperComponent" Options="CropperOptions" />

The issue is that the cropper component can only accept a url for the src so I can't use image data.

I had the following ideas:

1: save the image byte[] to wwwroot/images, but iOS doesn't allow you access.

2: save the image byte[] to appdata, but I can't serve the image to the razor component as there's no url.

3: Create a controller/action in the app that serves the image from appdata and give the url to the razor component. Except, you can't seem to create controllers in MAUI Blazor.

I'm trying to do this locally for cropping, before uploading the image to a webapi.

I don't know what to try next


Solution

  • https://stackoverflow.com/a/75282680/2726160

    I eventually found this post. Amazing thank you!

    Describes creating a new WebView class that provides access to appdata and replacwa the WebView in MainPage.