C# How to: Encoding Bitmaps to Base64 strings

Article purpose

This article explores encoding Bitmap images to Base64 strings. Encoding is implemented by means of an extension method targeting the Bitmap class.

Sample source code

This article is accompanied by a sample source code Visual Studio project which is available for download .

Images as Base64 strings

From :

Base64 is a group of similar encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The Base64 term originates from a specific MIME content transfer encoding.

Base64 encoding schemes are commonly used when there is a need to encode binary data that need to be stored and transferred over media that are designed to deal with textual data. This is to ensure that the data remain intact without modification during transport. Base64 is commonly used in a number of applications including email via MIME, and storing complex data in XML.

From the definition quoted above the need for base64 encoding becomes more clear. From MSDN documentation:

The base-64 digits in ascending order from zero are the uppercase characters "A" to "Z", the lowercase characters "a" to "z", the numerals "0" to "9", and the symbols "+" and "/". The valueless character, "=", is used for trailing padding.

Base64 encoding allows developers to expose binary data without potentially encountering conflicts in regards to the transfer medium. Base64 encoded binary data serves ideally when performing data transfer operations using platforms such as html, xml, email.

A common implementation of Base64 encoding can be found when transferring image data. This article details how to convert/encode a object to a Base64 string.

Base64 Bitmap encoding implemented as an extension method

The code snippet listed below details the ToBase64String extension method targeting the class.

public static string ToBase64String(this Bitmap bmp, ImageFormat imageFormat)
{
    string base64String = string.Empty;

MemoryStream memoryStream = new MemoryStream(); bmp.Save(memoryStream, imageFormat);
memoryStream.Position = 0; byte[] byteBuffer = memoryStream.ToArray();
memoryStream.Close();
base64String = Convert.ToBase64String(byteBuffer); byteBuffer = null;
return base64String; }

The ToBase64String method writes the targeted object’s pixel data to a object using the specified parameter. Next a byte array is extracted and passed to the method , which is responsible for implementing the Base64 encoding.

Creating an Image tag implementing a Base64 string

The sample source code in addition also defines an extension method to generate html image tags to display a Base64 string encoded image.

 public static string ToBase64ImageTag(this Bitmap bmp, ImageFormat imageFormat)
{
    string imgTag = string.Empty;
    string base64String = string.Empty;

base64String = bmp.ToBase64String(imageFormat);
imgTag = "<img src=\\"data:image/" + imageFormat.ToString() + ";base64,"; imgTag += base64String + "\\" "; imgTag += "width=\\"" + bmp.Width.ToString() + "\\" "; imgTag += "height=\\"" + bmp.Height.ToString() + "\\" />";
return imgTag; }

The ToBase64ImageTag extension method invokes the ToBase64String extension method in order to retrieve encoded the data. The Html image tag has only to be slightly modified from the norm in order to accommodate Base64 encoded strings.

The implementation

The two extension methods are implemented using a console based application.

 static void Main(string[] args)
{
    StreamReader streamReader = new StreamReader("NavForward.png");
    Bitmap bmp = new Bitmap(streamReader.BaseStream);
    streamReader.Close();

string base64ImageAndTag = bmp.ToBase64ImageTag(ImageFormat.Png);
Console.WriteLine(base64ImageAndTag);
Console.ReadKey(); }
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Dewald Esterhuizen

Blog Stats

  • 490,660 hits

Enter your email address to follow and receive notifications of new posts by email.

Join 214 other followers

Archives

Twitter feed


%d bloggers like this: