loading image from android camera with blazor

[Walter Martin]

I'm working in a NetMaui Hybrid Blazor project where I need to load inside the SfImageEditor object the image from android camera.

Is this possible from Blazor ?

Do you have a sample code ?

Thanks

[Walter Martin]

I'm using this piece of code but it doesn't show the image in the editor

<button class="btn btn-primary" @onclick="Capturephoto">Scatta</button>

<SfImageEditor @ref="imageEditor" Height="500"></SfImageEditor>

@code {

    SfImageEditor imageEditor;

    private async Task Capturephoto()

    {

        FileResult photo = null;

        if (DeviceInfo.Current.Platform == DevicePlatform.Android || DeviceInfo.Current.Platform == DevicePlatform.iOS)

        {

            photo = await MediaPicker.Default.CapturePhotoAsync();

        }

        if (photo != null)

        {

            Stream sourceStream = await photo.OpenReadAsync();

            byte[] bytes = new byte[Convert.ToInt32(sourceStream.Length)];

            using (var memoryStream = new MemoryStream())

            {

                sourceStream.CopyTo(memoryStream);

                bytes = memoryStream.ToArray();

            }

            await imageEditor.OpenAsync(bytes);

        }

    }

}

[Keerthikaran Venkatachalam]

Hi Walter,

We have checked the reported query, and the OpenAsync method of the Image Editor component offers the capability to open an image, such as a base64-encoded string, raw image data, or a hosted or online URL. You can convert a byte array into base64 and pass base64 in the OpenAsync method, and it will load the image into the image editor component. Please refer to the code snippet.

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.ImageEditor

<SfButton OnClick="LoadImage">Load Image</SfButton>

    <SfImageEditor @ref="ImageEditor" Height="500">

</SfImageEditor>

 

 

@code {

    SfImageEditor ImageEditor { get; set; }

    private async Task LoadImage()

    {

        await ImageEditor.ResetAsync();

        var dataUrl = await GetImage();

        await ImageEditor.OpenAsync(dataUrl);

    }

 

    public async Task<string> GetImage()

    {

        using (HttpClient httpClient = new HttpClient())

        {

            var imageBytes = await httpClient.GetByteArrayAsync("https://www.shutterstock.com/image-photo/linked-together-life-cropped-shot-600w-2149264221.jpg");

            string base64String = Convert.ToBase64String(imageBytes);

            return "data:image/png;base64," + base64String;

        }

    }

}

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V