How to convert Imagestream to bytearray

Question

I am using Drawing view to display signaturepad in .NET MAUI and trying to extract the drawn lines and save it as BASE64 image but it is not reading the data properly. please find the code below and help us with this.

public async void OnDrawLineCompleted(object sender, CommunityToolkit.Maui.Core.DrawingLineCompletedEventArgs e)
{
    
    Image gestureImage = new Image();
    var imageStreamTask = await signatureView.GetImageStream(gestureImage.Width, gestureImage.Height);
    if (imageStreamTask != null && imageStreamTask.Length > 0)
    {
        using (MemoryStream memoryStream = new MemoryStream())
        {
            await imageStreamTask.CopyToAsync(memoryStream);
            byte[] byteArray = memoryStream.ToArray();

            Base64Image = Convert.ToBase64String(byteArray);
            Console.WriteLine("Base64image================: " + Base64Image);
            this.viewModel.ImageBase64String = Base64Image;

        }
    }
}

Answer 1

Hello,

According to Handle event when Drawing Line Completed, it is a way to get the byte stream as follows.

private async void DrawingView_DrawingLineCompleted(object sender, CommunityToolkit.Maui.Core.DrawingLineCompletedEventArgs e)
{
    Image gestureImage = new Image();
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
    var stream = await e.LastDrawingLine.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token);
    if (stream != null && stream.Length > 0)
    {
        using (MemoryStream memoryStream = new MemoryStream())
        {
            await stream.CopyToAsync(memoryStream);
            byte[] byteArray = memoryStream.ToArray();

            var Base64Image = Convert.ToBase64String(byteArray);
            Console.WriteLine("Base64image================: " + Base64Image);
        }
    }
}

In addition, after testing, this method only works on the desktop platform, and if it is on the Android or iOS platform, the byte stream is always a fixed value.

On Android and iOS platforms, either using the code you provided or the sample code in the official example, after the GetImageStream method is executed, the value of stream.length is constant at 99. Since this feature is not well-known in this documentation as desktop-specific, it is more recommended that you report this issue to the CommunityToolkit repository to make the development team aware of the issue.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.