Software by Default

Article purpose

This article details how to read Image files from the file system, create thumbnails and then encoding thumbnails images to Base64 strings.

Sample source code

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

Images as Base64 strings

From Wikipedia:

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 Image object thumbnails to Base64 strings.

Base64 Image encoding implemented as an extension method

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

public static string ToBase64String(this Image bmp)
{
    string base64String = string.Empty;
    MemoryStream memoryStream = null;

 
    try
    {
        memoryStream = new MemoryStream();
        bmp.Save(memoryStream, ImageFormat.Png);
    }
    catch (Exception exc)
    {
        return String.Empty;
    }

 
    memoryStream.Position = 0;
    byte[] byteBuffer = memoryStream.ToArray();

 
    memoryStream.Close();

 
    base64String = Convert.ToBase64String(byteBuffer, Base64FormattingOptions.InsertLineBreaks);
    byteBuffer = null;

 
    return base64String;
}

The ToBase64String method writes the targeted Image object’s pixel data to a MemoryStream object using the Png ImageFormat. Next a byte array is extracted and passed to the method Convert.ToBase64String, 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 Image bmp)
{
    string imgTag = string.Empty;
    string base64String = string.Empty;

 
    base64String = bmp.ToBase64String();

 
    imgTag = "<img src=\\"data:image/" + "png" + ";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.

Creating Image thumbnails

The Image class conveniently provides the method GetThumbnailImage, which we’ll be using to create thumbnails from existing Image objects. The sample source code defines the method ToBase64Thumbnail, as listed below:

public static string ToBase64Thumbnail(this Image bmp, int width, int height, bool wrapImageTag)
{
    Image.GetThumbnailImageAbort callback = new Image.GetThumbnailImageAbort(ThumbnailCallback);

 
    Image thumbnailImage = bmp.GetThumbnailImage(width, height, callback, new IntPtr());

 
    string base64String = String.Empty;

 
    if (wrapImageTag == true)
    {
        base64String = thumbnailImage.ToBase64ImageTag();
    }
    else
    {
        base64String = thumbnailImage.ToBase64String();
    }

 
    thumbnailImage.Dispose();

 
    return base64String;
}

 
private static bool ThumbnailCallback()
{
    return true;
}

The ToBase64Thumbnail is defined as an extension method targeting the Image class. The calling code is required to specify the width and height of the output thumbnails and in addition whether to wrap the Base64 encoded string in an Html <img> tag.

Note the definition of ThumnailCallback, the GetThumbnailImage method requires calling code to specify a callback delegate.

Based on the value of the parameter wrapImageTag, we next invoke either ToBase64ImageTag or ToBase64String, as defined/discussed earlier.

Reading Image files from the file system

The starting point in creating Base64 encoded thumbnails would be to read the local file system, searching for image files. The ToBase64Thumbnails method is defined as an extension method targeting the string class. When invoking the ToBase64Thumbnails method users are expected to provide a directory path, width and height of output thumbnails, whether to add Html <img> tags and which file types to process. The code snippet below details the implementation of the ToBase64Thumbnails method.

public static List<string> ToBase64Thumbnails(this string path, int width, int height, bool wrapImageTag, params string[] fileTypes)
{
    List<string> base64Thumbnails = new List<string>();

 
    string searchFilter = String.Empty;

 
    if (fileTypes != null)
    {
        for (int k = 0; k < fileTypes.Length; k++)
        {
            searchFilter += "*." + fileTypes[k];

 
            if (k < fileTypes.Length - 1)
            {
                searchFilter += "|";
            }
        }
    }
    else
    {
        searchFilter = "*.*";
    }

 
    string[] files = Directory.GetFiles(path, searchFilter);

 
    for (int k = 0; k < files.Length; k++)
    {
        StreamReader streamReader = new StreamReader(files[k]);
        Image img = Image.FromStream(streamReader.BaseStream);
        streamReader.Close();

 
        base64Thumbnails.Add(img.ToBase64Thumbnail(width, height, wrapImageTag));

 
        img.Dispose();
    }

 
    return base64Thumbnails;
}

The ToBase64Thumbnails method implements the static method Directory.GetFiles in order to search a specified directory path. When invoking the ToBase64Thumbnails method the calling code can optionally specify a number of file extensions, which results in only files having file extensions conforming to the specified extensions being encoded.

Once an array of file paths have been determined the sample code iterates the array creating an Image object of each file specified. The final step required is to invoke the extension method ToBase64Thumbnail.

The implementation

The sample source code defines a console based application, used to test/illustrate creating Base64 encoded thumbnails based on a specified directory path.  Included in the sample code is a template html file. The Main method generates a list of Base64 encoded thumbnails by invoking ToBase64Thumbnails, defined as an extension method targeting the String class. The resulting Base64 encoded thumbnails are defined as Html <img> tags, added to a copy of the html template file. The Console application’s definition:

static void Main(string[] args)
{
    string path = "Images";

 
    List<string> thumbnailTags = path.ToBase64Thumbnails(100, 100, true, null);

                 
    StreamReader streamreader = new StreamReader("HtmlTemplate.htm");
    StringBuilder htmlPage = new StringBuilder(streamreader.ReadToEnd());
    streamreader.Close();

 
    StringBuilder imageTags = new StringBuilder();

 
    for (int k = 0; k < thumbnailTags.Count; k++)
    {
        imageTags.AppendLine("<p>");
        imageTags.AppendLine(thumbnailTags[k]);
        imageTags.AppendLine("</p>");
    }

 
    htmlPage.Replace("<!--Tags_Placeholder-->", imageTags.ToString());

 
    StreamWriter streamwriter = new StreamWriter("TempPage.htm", false, Encoding.UTF8);
    streamwriter.Write(htmlPage.ToString());
    streamwriter.Close();

 
    Process.Start("TempPage.htm");

 
    Console.ReadKey();
}

The resulting Base64 encoded image thumbnails viewed as html <img> tags forming part of an html file, as viewed in Microsoft Internet Explorer 9: