C# RGB[,] to picturebox

Question

I have a data that is (2448*2048) 5Mpixel image data, but the picturebox only has (816*683) about 500,000 pixels, so I lowered the pixels and I only need a black and white image, so I used the G value to create the image, but The image I output is shown in the following figure. Which part of my mistake?

 public int[,] lowered(int[,] greenar)
    {
        int[,] Sy = new int[816, 683];
        int x = 0;
        int y = 0;
        for (int i = 1; i < 2448; i += 3)
        {
            for (int j = 1; j < 2048; j += 3)
            {
                Sy[x, y] = greenar[i, j];
                y++;
            }
            y = 0;
            x++;
        }
        return Sy;
    }


static Bitmap Create(int[,] R, int[,] G, int[,] B)
    {
        int iWidth = G.GetLength(1);
        int iHeight = G.GetLength(0);
        Bitmap Result = new Bitmap(iWidth, iHeight,
        System.Drawing.Imaging.PixelFormat.Format24bppRgb);
        Rectangle rect = new Rectangle(0, 0, iWidth, iHeight);
        System.Drawing.Imaging.BitmapData bmpData = Result.LockBits(rect,
        System.Drawing.Imaging.ImageLockMode.ReadWrite, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
        IntPtr iPtr = bmpData.Scan0;
        int iStride = bmpData.Stride;
        int iBytes = iWidth * iHeight * 3;
        byte[] PixelValues = new byte[iBytes];
        int iPoint = 0;
        for (int i = 0; i < iHeight; i++)
        {
            for (int j = 0; j < iWidth; j++)
            {
                int iG = G[i, j];
                int iB = G[i, j];
                int iR = G[i, j];
                PixelValues[iPoint] = Convert.ToByte(iB);
                PixelValues[iPoint + 1] = Convert.ToByte(iG);
                PixelValues[iPoint + 2] = Convert.ToByte(iR);
                iPoint += 3;
            }
        }
        System.Runtime.InteropServices.Marshal.Copy(PixelValues, 0, iPtr, iBytes);
        Result.UnlockBits(bmpData);
        return Result;

    }

https://upload.cc/i1/2018/04/26/WHOXTJ.png

Answer 1

You don't need to downsample your image, you can do it in this way. Set picturebox property BackgroundImageLayout as either zoom or stretch and assign it as:

picturebox.BackgroundImageLayout = System.Windows.Forms.ImageLayout.Zoom;
picturebox.BackgroundImage = bitmap;

System.Windows.Forms.ImageLayout.Zoom will automatically adjust your bitmap to the size of picturebox.

Answer 2

You seem to be constantly mixing up your x and y offsets, which can easily be avoided simply by actually calling your loop variables x and y whenever you loop through image data. Also, image data is generally saved line by line, so your outer loop should be the Y loop going over the height, and the inner loop should process the X coordinates on one line, and should thus loop over the width.

Also, I'm not sure where your original data comes from, but in most of the cases I've seen where the image data is in multidimensional arrays like this, the Y is actually the first index in the array. Your actual image building function also assumes this, since it uses G.GetLength(0) to get the height of the image. But your channel resize function doesn't; it makes a multidimensional array as new int[816, 683], which would be a 683*816 image, not 816*683 as you said. So that certainly seems wrong.

Since you confirmed it to be [x,y], I adapted this solution to use it like that.

That aside, you hardcoded a lot of values in your functions, which is very bad practice. If you know you will reduce the image to 1/3rd by taking only one in three pixels, just give that 3 as parameter.

The reduction code:

public static Int32[,] ResizeChannel(Int32[,] origChannel, Int32 lossfactor)
{
    Int32 newWidth = origChannel.GetLength(0) / lossfactor;
    Int32 newHeight = origChannel.GetLength(1) / lossfactor;
    // to avoid rounding errors
    Int32 origHeight = newHeight * lossfactor;
    Int32 origWidth = newWidth *lossfactor;
    Int32[,] newChannel = new Int32[newWidth, newHeight];
    Int32 newX = 0;
    Int32 newY = 0;
    for (Int32 y = 1; y < origHeight; y += lossfactor)
    {
        newX = 0;
        for (Int32 x = 1; x < origWidth; x += lossfactor)
        {
            newChannel[newX, newY] = origChannel[x, y];
            newX++;
        }
        newY++;
    }
    return newChannel;
}

The actual build code, as was remarked by GSerg in the comments, is wrong because you don't take the stride into account. The stride is the actual byte length of each line of pixels, and this is not just width * BytesPerPixel, since it gets rounded up to the next multiple of 4 bytes.

So you need to initialize your array as height * stride, not as height * width * 3, and you need to skip your write offset to the next multiple of the stride whenever you go to a lower Y line, rather than assuming it will just get there automatically because your X processing adds 3 for each pixel. Because it will not get there automatically, unless, by pure coincidence, your image width happens to be a multiple of 4 pixels.

Also, if you only use one channel for this, there is no reason to give it all three channels. Just give a single one.

public static Bitmap CreateGreyImage(Int32[,] greyChannel)
{
    Int32 width = greyChannel.GetLength(0);
    Int32 height = greyChannel.GetLength(1);
    Bitmap result = new Bitmap(width, height, PixelFormat.Format24bppRgb);
    Rectangle rect = new Rectangle(0, 0, width, height);
    BitmapData bmpData = result.LockBits(rect, ImageLockMode.ReadWrite, PixelFormat.Format24bppRgb);
    Int32 stride = bmpData.Stride;
    // stride is the actual line width in bytes.
    Int32 bytes = stride * height;
    Byte[] pixelValues = new Byte[bytes];
    Int32 offset = 0;
    for (Int32 y = 0; y < height; y++)
    {
        Int32 workOffset = offset;
        for (Int32 x = 0; x < width; x++)
        {
            pixelValues[workOffset + 0] = (Byte)greyChannel[x, y];
            pixelValues[workOffset + 1] = (Byte)greyChannel[x, y];
            pixelValues[workOffset + 2] = (Byte)greyChannel[x, y];
            workOffset += 3;
        }
        // Add stride to get the start offset of the next line
        offset += stride;
    }
    Marshal.Copy(pixelValues, 0, bmpData.Scan0, bytes);
    result.UnlockBits(bmpData);
    return result;
}

Now, this works as expected if your R, G and B channels are indeed identical, But if they are not, you have to realize there is a difference between reducing the image to grayscale and just building a grey image from the green channel. On a colour image, you will get totally different results if you take the blue or red channel instead.

This was the code I executed for this:

Int32[,] greyar = ResizeChannel(greenar, 3);
Bitmap newbm = CreateGreyImage(greyar);