Convert a raw RGB byte array to a JPG encoded string base64

Question

I am successfully converting a JPG image file into a base64 string, and then that string into a JPG image again.

string str64 = ImageToStrBase64(My.Resources.ImageJpg);
PictureBox1.Image = Base64StrToImage(str64);

ImageToStrBase64() and Base64StrToImage() are custom functions just to explain the idea, but I can place the code if necessary.

I am also converting a raw byte array (RGB or BGR, no matters) into a base64.

However, I do now need to convert a raw byte array into a JPG encoded base64 string. I am finding solutions that involves only an image file saving, but file management it's high time consuming. How to encode then a BGR byte array into a JPG byte array using, for example a memory stream?

Function use to convert jpg into a formatted byte array:

public static string ImagetoStrBase64(System.Drawing.Image imageToEncode)
{
    string base64String = "";

    using (System.Drawing.Image image = imageToEncode)
    {
        using (MemoryStream m = new MemoryStream())
        {
            image.Save(m, image.RawFormat);
            byte[] imageBytes = m.ToArray();
            base64String = Convert.ToBase64String(imageBytes);
        }
    }

    return base64String;
}

---

Update (regarding to chat)

Let's simplify it... We have a byte[] with single green pixel:

byte[] rawPixelArray = new byte[] {0, 255, 0}; 

Then, GetJpgBytes(rawPixelArray) must return an encoded byte[] for a Jpeg image of 1x1 pixel. This is more clear I guess :)

Answer 1

Before you read the answer, read the bullet points:

• A real useful conversion, should return JPEG encoded image which is equivalent to content of a Jpeg file, which is not pixel data.

• When you get an array of pixel data of a Jpeg image, you will have non of benefits of a Jpeg image. It's no more Jpeg encoded image, it's an array of pixel data which can be used to create a BitMap.

• To better understand the point, for example for a 10K JPEG white image, the pixel data will be 2MB!

• I've shared a few methods in this answer which are really useful standalone, and I've showed how you can combine them to get what you want. (While I cannot see any benefit in the conversion which you are trying to do.)

---

These are very useful pieces which you can put together to solve the puzzle:

1. ImageData: In addition to a byte[] of image pixels, you need to know about width, height and pixel format of the image. Then you can describe the image and create an Image from that data. Without having all these information a byte[] is meaningless on its own.
2. GetImageDataFromImage: Gets image data (width, height, pixel format, pixel data) from an Image
3. CreateImageFromImageData: Creates an Image from image data
4. ConvertImageToJpegImage: Converts an Image to Jpeg Image
5. ByteArrayToBase64: Converts a byte[] to Base64 string.

Then after having these pieces, you can achieve what you want.

Assuming you have a byte[] of pixel data, width, height and pixel format of your data, this is what you need:

// A 2x2 image having 24 bit RGB pixel format, all pixels are #FF0000 (Red)
var imageData = new ImageData()
{
    Width = 2,
    Height = 2,
    PixelFormat = PixelFormat.Format24bppRgb,
    PixelData = new byte[] {
        0x0, 0x0, 0xFF,   0x0, 0x0, 0xFF,
        0xF, 0x0, 0xFF,   0x0, 0x0, 0xFF
    }
};
var image = CreateImageFromImageData(imageData);
var jpeg = ConvertImageToJpegImage(image);
var jpegImageData = GetImageDataFromImage(jpeg);
var jpegPixelsBase64 = ByteArrayToBase64(jpegImageData.PixelData);

Which result in AAD+AAD+AAD+AAD+ which is in fact an image having #FE0000 color!

Note: I didn't dispose images to keep it clear, in action, you need to dispose image and jpeg.

ImageData

Required information about an image, including width, height, pixel format, and pixel data array:

public class ImageData
{
    public int Width { get; set; }
    public int Height { get; set; }
    public PixelFormat PixelFormat { get; set; }
    public byte[] PixelData { get; set; }
}

GetImageDataFromImage

Gets image data from an image.

ImageData GetImageDataFromImage(Image image)
{
    using (var bitmap = new Bitmap(image.Width, image.Height, image.PixelFormat))
    {
        using (var g = Graphics.FromImage(bitmap))
            g.DrawImage(image, new Rectangle(0, 0, image.Width, image.Height));
        var data = bitmap.LockBits(new Rectangle(0, 0, bitmap.Width, bitmap.Height),
            ImageLockMode.ReadOnly, bitmap.PixelFormat);
        var rowLength = image.Width * Image.GetPixelFormatSize(image.PixelFormat) / 8;
        var bytes = new byte[image.Height * rowLength];
        var ptr = data.Scan0;
        for (var i = 0; i < image.Height; i++)
        {
            Marshal.Copy(ptr, bytes, i * rowLength, rowLength);
            ptr += data.Stride;
        }
        bitmap.UnlockBits(data);
        return new ImageData
        {
            Width = bitmap.Width,
            Height = bitmap.Height,
            PixelFormat = bitmap.PixelFormat,
            PixelData = bytes
        };
    }
}

We rely on LockBits to get or set image byte array.

CreateImageFromImageData

Creates image from image data:

Image CreateImageFromImageData(ImageData imageData)
{
    var bitmap = new Bitmap(imageData.Width, imageData.Height, imageData.PixelFormat);
    var data = bitmap.LockBits(new Rectangle(0, 0, bitmap.Width, bitmap.Height),
        ImageLockMode.ReadWrite, bitmap.PixelFormat);
    var rowLength = imageData.Width * Image.GetPixelFormatSize(imageData.PixelFormat) / 8;
    var bytes = new byte[imageData.Height * rowLength];
    var ptr = data.Scan0;
    for (var i = 0; i < imageData.Height; i++)
    {
        Marshal.Copy(imageData.PixelData, i * rowLength, ptr, rowLength);
        ptr += data.Stride;
    }
    bitmap.UnlockBits(data);
    return bitmap;
}

We rely on LockBits to get or set image byte array.

ConvertImageToJpegImage

Converts an image to Jpeg Image:

public Image ConvertImageToJpegImage(Image img)
{
    using (var stream = new MemoryStream())
    {
        img.Save(stream, ImageFormat.Jpeg);
        var bytes = stream.ToArray();
        return (Image)new ImageConverter().ConvertFrom(bytes);
    }
}

If you care about compression level use jpeg encoder.

ByteArrayToBase64

Conversion from byte[] to Base64String and is straightforward, but to have better readability of the answer and the code:

public string ByteArrayToBase64(byte[] bytes)
{
    return Convert.ToBase64String(bytes);
}