Sample source code
Images as Base64 strings
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.
Base64 Image encoding implemented as an extension method
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 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:
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.
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 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: