Converting Text into Image On-The-Fly

Sometimes we need to convert text into the images on the fly. This code converts the text into image and displays it onto the web page without saving it into a file on the disk. It also takes care of text wrapping.

 

TextToImageConvertor can either be used in a web page or in a module. I have used this code in a web page. To use TextToImageConvertor in a module, you will need to make some changes in the step 8.

The code for TextToImageConvertor is self explanatory. However, I am going to describe this step-by-step.

Step 0 - Include Namespaces

using System.Drawing;
using System.Drawing.Imaging;

Step 1 - Declare Properties

Declare some variables that will control the behavior and color of the image.

string Text = Request.QueryString["Text"];
Color FontColor = Color.Blue;
Color BackColor = Color.White;
String FontName = "Times New Roman";
int FontSize = 10;
int Height = 150;
int Width = 150;

Step 2 - Create a Bitmap Object to Hold The Image

Bitmap bitmap = new Bitmap(Width, Height);

Step 3 - Create a Graphics object using this Bitmap object

Graphics graphics = Graphics.FromImage(bitmap);

Step 4 - Create Color, Font, and  PointF objects.

Color color = Color.Gray; ;
Font font = new Font(FontName, FontSize);
//define where the text will be displayed in the specified area of the image
PointF point = new PointF(5.0F, 5.0F);

Step 5 - Create Brushes and Pen

SolidBrush BrushForeColor = new SolidBrush(FontColor);
SolidBrush BrushBackColor = new SolidBrush(BackColor);
Pen BorderPen = new Pen(color);

Step 6 - Draw Rectangle using Graphics object

Rectangle displayRectangle = new Rectangle(new Point(0, 0), new Size(Width - 1, Height - 1));
graphics.FillRectangle(BrushBackColor, displayRectangle);
graphics.DrawRectangle(BorderPen, displayRectangle);
Step 7 - Draw Text string on the specified rectangle using Graphics object
//Define string format 
StringFormat format1 = new StringFormat(StringFormatFlags.NoClip);
StringFormat format2 = new StringFormat(format1);
//Draw text string using the text format
graphics.DrawString(Text, font, Brushes.Red, (RectangleF)displayRectangle, format2);
Step 8 - Send the bitmap to page output stream in JPEG format
Response.ContentType = "image/jpeg";
bitmap.Save(Response.OutputStream, ImageFormat.Jpeg);

 

Using TextToImageConvertor

TextToImageConvertor is developed as a web page which can be accessed directly by passing the text in he query string.

To demonstrate the use of this tool, create a webpage with a textbox, a button and an image control. On the click event of the button, set the image URL to the convertor page and pass the text of text box into the query string. In the example code below, I have named my image control as img1 and text box as txtNote.

img1.ImageUrl = "default2.aspx?Text=" + txtNote.Text;

Technorati Tags: ,
 
kick it on DotNetKicks.com
Published Friday, November 07, 2008 9:36 AM by Yanesh Tyagi
Filed under: , , ,

Comments

# re: Text To Image Convertor

Thursday, November 06, 2008 11:32 PM by Vivek

Certainly its very useful. I have personally use this code and saw the usefullness. Gr8 work friend. But i still think we can skip the second page (default2.aspx)......at this point of time i dont know how but i guess there must be some way around.

In the end its a Gr8 work.

Looking forward for some more interesting code :-)

possibly vice-versa of this code (ImageToText COnvertor).

# re: Text To Image Convertor

Friday, November 07, 2008 5:24 AM by Vipin Vij

grt, small and neat. Things have realy changed from asp to asp.net in a real good way. Thats a real good finding yanesh. One question can this be used for generating bar codes?? or something else is there.

# re: Text To Image Convertor

Friday, November 07, 2008 5:49 AM by Yanesh Tyagi

 Vij,

Creating bar code is something different from creating images. In the bar code, characters (numbers) are converted into lines of specified width according to the bar code standard you are using.

Following link maybe helpful to you:

www.vsdotnet.be/.../CreatingBarcodesOnTheFlyWithC.aspx

# re: Text To Image Convertor

Saturday, November 08, 2008 4:39 AM by BartDeVries

Hi,

You might be interested in this one also. We build a more extended version for generating images on the fly to replace the sIFR.

It's free, opensource and allows more options like themes, styles, mouseovers, inline images and SEO.

The project is called the bATR and code can be found at http://www.codeplex.com/bATR

# Converting Text into Image On-The-Fly (C#)

Tuesday, January 27, 2009 4:07 AM by DotNetKicks.com

You've been kicked (a good thing) - Trackback from DotNetKicks.com

# re: Converting Text into Image On-The-Fly

Wednesday, January 28, 2009 3:19 AM by Niki

Note that you shouldn't use GDI or GDI+ in an ASP.NET environment:

"Classes within the System.Drawing namespace are not supported for use within a Windows or ASP.NET service. Attempting to use these classes from within one of these application types may produce unexpected problems, such as diminished service performance and run-time exceptions."

msdn.microsoft.com/.../system.drawing.aspx

Here's an old blog post by an MS employee about it: blogs.msdn.com/.../charting-in-asp-net-alas-dgi-not-supported-from-a-service.aspx

# re: Converting Text into Image On-The-Fly

Thursday, January 29, 2009 1:15 AM by Joy

Hi yanesh good example..

Can we get the image with good clarity is there any way?

# re: Converting Text into Image On-The-Fly

Friday, February 27, 2009 2:17 AM by Bart

For creating smooth texts in the bATR I use the System.Windows.Media(WPF) classes instead of System.Drawing. After that I use the MS.Manipulation library for optimizing.

Bart

# re: Converting Text into Image On-The-Fly

Monday, March 16, 2009 8:03 AM by SM Nabeel

Nice Buddy!

hanks a lot for ur time and ur wrk

# re: Converting Text into Image On-The-Fly

Friday, March 27, 2009 1:44 AM by Andy

Hi It seems good for converting single line text into images.

But what about if we need to convert the multiline text into image ?

Anyone any idea?

Thanks

Andy

# re: Converting Text into Image On-The-Fly

Tuesday, March 31, 2009 2:27 PM by BartDeVries

Andy,

You could use the WPF implementation where you can set a maximum width. The engine renders the multiline by itself now. (FormattedText object has a property MaxTextWidth)

Regards,

Bart

# re: Converting Text into Image On-The-Fly

Tuesday, May 12, 2009 7:27 AM by Sam

It is nice. It is also easy to convert more one lines into one image.

Leave a Comment

(required) 
(required) 
(optional)
(required)