How to get RGB code from bitmap

Question

To start things off I'm fairly new to C#, XAML and windows phone. So far I have managed to get a photo into the app via gallery/camera and turn it into grayscale. But my aim is to get the rgb values from a pixel and display it under the image as text. How would I go about changing the grayscale code to instead modify the image to just display the rgb code? Thanks!

async void GrayScale(Image lpictureBox)
{

    WriteableBitmap modifiedImage = lpictureBox.Source as WriteableBitmap;
    if (modifiedImage == null)
    {
        BitmapSource bs = lpictureBox.Source as BitmapSource;
        modifiedImage = new WriteableBitmap(bs.PixelWidth, bs.PixelHeight);
    }
    int r = 0, a = 0, i = 0;
    int h = modifiedImage.PixelHeight;
    int w = modifiedImage.PixelWidth;
    Stream stream = modifiedImage.PixelBuffer.AsStream();
    byte[] StreamBuffer = new byte[stream.Length];
    stream.Seek(0, 0);
    await stream.ReadAsync(StreamBuffer, 0, StreamBuffer.Length);
    for (i = 0; i < StreamBuffer.Length - 4; i = i + 4)
    {
        var a1 = StreamBuffer[i + 3];
        var r1 = StreamBuffer[i + 2];
        var g1 = StreamBuffer[i + 1];
        var b1 = StreamBuffer[i + 0];
        a = 0xff;
        r = (byte)((0.299 * r1) + (0.587 * g1) + (0.114 * b1));
        StreamBuffer[i + 3] = (byte)a;  // alpha​
        StreamBuffer[i + 2] = (byte)(r > 255 ? 255 : (r < 0 ? 0 : r));  //red​
        StreamBuffer[i + 1] = (byte)(r > 255 ? 255 : (r < 0 ? 0 : r));  //green​
        StreamBuffer[i + 0] = (byte)(r > 255 ? 255 : (r < 0 ? 0 : r));  //blue​
    }
    stream.Seek(0, 0);
    stream.Write(StreamBuffer, 0, StreamBuffer.Length);
    modifiedImage.Invalidate();
    lpictureBox.Source = modifiedImage;
}

Answer 1

There are lots of ways to accomplish what you're asking, including just using the third-party extensions library commenter CoderDennis mentioned.

But the code you've posted is very close to what you'd need, if I understand both your question and the Windows Phone implementation (the MSDN docs are short on details, such as pixel format and stride, two important properties of a bitmap to know when retrieving specific pixel data). Based on the code in the above-mentioned library, Windows Phone bitmaps are always 32 bits per pixel and always have a stride equal to the width of the bitmap.

Note also that if you are going to be retrieving the pixel information frequently, you probably do not want to re-read the entire bitmap every time you want to retrieve the pixel information. Instead, you'll want to cache the byte buffer for reuse each time.

So with that in mind, here's your original code, rearranged and extended to accomplish what you're asking:

class BitmapData
{
    private readonly byte[] _buffer;
    private readonly int _stride;

    private BitmapData(byte[] buffer, int stride)
    {
        _buffer = buffer;
        _stride = stride;
    }

    public Color GetPixel(int x, int y)
    {
        Color color = new Color();

        // Convert from pixel to byte offsets
        int pixelOffset = y * _stride * 4 + x * 4;

        // Retrieve pixel data
        color.A = _buffer[pixelOffset + 3];
        color.R = _buffer[pixelOffset + 2];
        color.G = _buffer[pixelOffset + 1];
        color.B = _buffer[pixelOffset + 0];

        return color;
    }

    public static async Task<BitmapData> Create(BitmapSource source)
    {
        WriteableBitmap dataSource = source as WriteableBitmap;

        if (dataSource == null)
        {
            // NOTE: in your original code, this is all the initialization you
            // did when the input isn't already a WriteableBitmap object.
            // Wouldn't it make more sense to copy the source bitmap
            // to your new WriteableBitmap object? Otherwise, you won't have
            // the pixel data from the source!
            dataSource = new WriteableBitmap(source.PixelWidth, source.PixelHeight);
        }

        Stream stream = dataSource.PixelBuffer.AsStream();
        byte[] buffer = new byte[stream.Length];
        stream.Seek(0, 0);
        await stream.ReadAsync(buffer, 0, buffer.Length);

        return new BitmapData(buffer, dataSource.PixelWidth);
    }
}

You can create like this:

BitmapData bitmapData = await BitmapData.Create(lpictureBox.Source);

You'll need to save that object in a field somewhere, so that later when you want the pixel information, you can get it:

Color pixelColor = bitmapData.GetPixel(x, y);

Answer 2

If you need to know the RGB code for a specific pixel on a bitmap, you can use the Bitmap.GetPixel() method.

Here is a link to Bitmap.GetPixel() on MSDN

EDIT: Perhaps 'WritableBitmapEx' is what you need.

Their description:

The WriteableBitmapEx library is a collection of extension methods for the WriteableBitmap. The WriteableBitmap class is available for Windows Phone, WPF, WinRT Windows Store XAML and Silverlight and allows the direct manipulation of a bitmap and could be used to generate fast procedural images by drawing directly to a bitmap. The WriteableBitmap API is very minimalistic and there's only the raw Pixels array for such operations. The WriteableBitmapEx library tries to compensate that with extensions methods that are easy to use like built in methods and offer GDI+ like functionality.

This provides .GetPixel() and .GetPixeli() for the WritableBitmap class.