How to display gray scale 8 bit raw pixel data array (i.e. byte[]) to Image control in WinUI3

Question

The raw pixel data array (byte[]) is retreived from camera and it is notified as an event to main page.
The pixel format is like that:-

• GrayScale 8bit (i.e color band = 1)
• width: 612, height: 512 -> total size = 612 * 512 = 313,344 bytes

Here is my code so far, which does not show anything in image control.

// Behind code of Main Page //////////////////////////////////////////////////////

// This event is called when camera image was captured from camera library
private void Camera_ImageCaptured(object? sender, ImageCapturedEventArgs e)
{
    // CameraImage is Image control of the main page
    _ = CameraImage.DispatcherQueue.TryEnqueue(async () =>
    {
        await GetBitmapAsync3(e.ImageBuffer, e.Width, e.Height);
    });
}

// This method is called in UI thread
public async Task GetBitmapAsync3(byte[] data, int width, int height)
{
    WriteableBitmap newImage = new WriteableBitmap(width, height);
    using var stream = newImage.PixelBuffer.AsStream();
    stream.Write(data);
    await stream.FlushAsync();
    stream.Close();
    ViewModel.WriteableBitmap = newImage;
}

// parameters from camera library
public class ImageCapturedEventArgs : EventArgs
{
    public ImageCapturedEventArgs( byte[] buffer, int width, int height );

    public int Height { get; set; }
    public int Width { get; set; }
    public byte[] ImageBuffer { get; set; }
}

// View Model ///////////////////////////////////////////////
public partial class MainViewModel : ObservableRecipient
{
    [ObservableProperty]
    public WriteableBitmap writeableBitmap;
    public int ImageWidth{ get; set; }
    public int ImageHeight { get; set; }
    public int ImageSize => ImageWidth * ImageHeight;

    public MainViewModel()
    {
        ImageWidth = 612;
        ImageHeight = 512;

        writeableBitmap = new WriteableBitmap(ImageWidth, ImageHeight);
    }
}

// XAML of main page /////////////////////////////////////////////////

<UserControl.DataContext>
    <viewmodels:MainViewModel />
</UserControl.DataContext>

<Grid x:Name="ContentArea">
    <Image
        x:Name="CameraImage"
        Grid.Row="0"
        Grid.Column="0"
        Width="612"
        Height="512"
        Source="{Binding WriteableBitmap}" />
</Grid>

I tried it with the above code, but it does not show anything in main page... Does anyone help me?

Answer 1

I'm not sure if Microsoft.UI.Xaml.Media.Imaging.WriteableBitmap supports 1 byte data for each pixel.

Can you try the next?

public async Task GetBitmapAsync3(byte[] data, int width, int height)
{
    byte[] outputData= new byte[width * height * 4];
    int inputIndex = 0;
    int outputIndex = 0;
    for (int y = 0; y < height; y++)
    {
        for (int x = 0; x < width; x++)
        {
            byte value = data[inputIndex++];
            outputData[outputIndex++] = value;
            outputData[outputIndex++] = value;
            outputData[outputIndex++] = value;
            outputData[outputIndex++] = 255;
        }
    }


    WriteableBitmap newImage = new WriteableBitmap(width, height);
    using var stream = newImage.PixelBuffer.AsStream();
    await stream.WriteAsync(outputData);
    await stream.FlushAsync();
    stream.Close();
    ViewModel.WriteableBitmap = newImage;
}

Answer 2

You can use this library to interpret a byte array as a bitmap data (disclaimer: I am the author).

Use the technology-agnostic core package to treat your array as an 8-bit grayscale bitmap:

using KGySoft.Drawing.Imaging;

// ...

// interpreting the byte array as a grayscale bitmap
var myArrayBackedBitmap = BitmapDataFactory.CreateBitmapData(myByteArray,
   new Size(612, 512),
   stride: 612,
   pixelFormat: KnownPixelFormat.Format8bppGrayScale);

// now you can Get/Set pixels, draw other images into your bitmap, etc.

And if you use the WinUI 3 specific package you can simply convert the managed bitmap to a WinUI 3 WriteableBitmap:

var myWinUI3Bitmap = await myArrayBackedBitmap.ToWriteableBitmapAsync();

Perfomance considerations:

Please note that ToWriteableBitmapAsync always creates a new WriteableBitmap instance, which may affect performance as it's neither disposable nor managed (as almost everything in WinUI, it is a "remote" COM object). It could be better to re-use a single WriteableBitmap instance:

// A field allocated once
private WriteableBitmap _renderingTarget;

// [...]

// instead of ToWriteableBitmap, just draw the grayscale bitmap always into the same bitmap.
using (var targetBitmapData = _renderingTarget.GetReadWriteBitmapData())
    await myArrayBackedBitmap.DrawIntoAsync(_renderingTarget);

// Here, after the end of using block the target WriteableBitmap is
// invalidated so the possible bindings can refresh themselves

Feel free to check out also this WinUI specific example for the library.