How to create Image from text in C#

Recently I’ve decided to publish everything that I consider interesting from my everyday programming life. So this is my first article on this blog, first of many I hope.

Text images with c sharp
In this article I’ll explain how you can create images (in any format) from text using C#. For that purpose I’ve created a simple project  and a live demo in which I demonstrate how it can be done.

What is Graphics object and what is it used for

Before you can draw lines and shapes, render text, or display and manipulate images with GDI+, you need to create a Graphics object. The Graphics object represents a GDI+ drawing surface, and is the object that is used to create graphical images. Following lines of code demonstrate how you can create Graphics object and how to create automatically calculate Image dimensions from the font and the size length.

// Create graphics for rendering
 Graphics retBitmapGraphics = Graphics.FromImage(new Bitmap(1, 1));
 // measure needed width for the image
 var bitmapWidth = (int)retBitmapGraphics.MeasureString(text, Font).Width;
 // measure needed height for the image
 var bitmapHeight = (int)retBitmapGraphics.MeasureString(text, Font).Height;
 // Create the bitmap with the correct size and add padding
 Bitmap retBitmap = new Bitmap(bitmapWidth + Padding, bitmapHeight + Padding);

Note that the Font is of type System.Drawing.Font, and the Padding variable is integer variable that we use for padding setting around the text because we don’t want the text to be attached to the borders of the image.
After it is created, a Graphics object may be used to draw lines and shapes, render text, or display and manipulate images. The principal objects that are used with the Graphics object are:

  • The Pen class—Used for drawing lines, outlining shapes, or rendering other geometric representations.
  • The Brush class—Used for filling areas of graphics, such as filled shapes, images, or text.
  • The Font class—Provides a description of what shapes to use when rendering text.
  • The Color structure—Represents the different colors to display.

In the next sample of code is demonstrated how can we use the Graphics object to fill the background color, set the smoothing mode, set text rendering hint and how to actually draw the string on the image.

// Set Background color
retBitmapGraphics.Clear(BackgroundColor);
retBitmapGraphics.SmoothingMode = SmoothingMode.AntiAlias;
retBitmapGraphics.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
retBitmapGraphics.DrawString(text, Font, new SolidBrush(TextColor), Padding / 2, Padding / 2);
// flush the changes
retBitmapGraphics.Flush();

How to use TextImageGenerator

TextImageGenerator is a simple class for easy creating images from text. With TextImageGenerator you can set Font, FontSize, TextColor, BackgroundColor and Padding. The usage is very simple and you can save your images as Jpeg, Bmp, Png, Gif or as a Base64 string which can be very useful if you like to send the image data in JSON object in your MVC project. In the following code snippet it’s demonstrated how to create TextImageGenerator object and use it to create text in image and save it in different formats.


var imageGenerator = new TextImageGenerator(Color.Orange, Color.Black, "Arial", 20, 25);
var imageText = "In dwelling, live close to the ground.\nIn thinking, keep to the simple.\nIn conflict, be fair and generous.\nIn governing, don't try to control.\nIn work, do what you enjoy.\nIn family life, be completely present.";
imageGenerator.SaveAsJpg("imageJPEG.jpeg", imageText);
imageGenerator.SaveAsPng("imagePNG.png", imageText);
imageGenerator.SaveAsGif("imageGIF.gif", imageText);
imageGenerator.SaveAsBmp("imageBMP.bmp", imageText);

This is the result image:

imagePNG

Test the live sample demo on .NET Fiddle or download the project from GitHub.

Happy coding!

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s