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 7, 2008 9:36 AM by Yanesh Tyagi
Filed under: , , ,

Comments

# re: Text To Image Convertor

Thursday, November 6, 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 7, 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 7, 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 8, 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

# 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.

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

Friday, May 6, 2011 4:31 PM by snn

How can we wrap long line of text over multiple lines based on specified width such as 600px then convert to image?

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

Monday, January 28, 2013 3:37 PM by Musselman

Definitely believe that which you stated. Your favorite reason seemed to be on the net the easiest thing to be aware of.

I say to you, I definitely get irked while people consider

worries that they just don't know about. You managed to hit the nail upon the top and also defined out the whole thing without having side-effects , people can take a signal. Will probably be back to get more. Thanks

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

Monday, January 28, 2013 5:31 PM by Shah

I pay a quick visit day-to-day some sites and blogs to read articles,

except this web site provides feature based posts.

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

Wednesday, February 13, 2013 6:11 PM by Nowell

We are a gaggle of volunteers and starting a brand new scheme in our community.

Your site provided us with valuable info to work on.

You have performed a formidable activity and our entire neighborhood will likely be grateful to you.

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

Saturday, February 16, 2013 4:55 PM by Wharton

Attractive section of content. I just stumbled upon your blog and in accession capital to assert that I acquire in fact enjoyed account

your blog posts. Any way I'll be subscribing to your augment and even I achievement you access consistently rapidly.

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

Saturday, February 16, 2013 6:46 PM by Fritz

Hi there, I check your blogs regularly. Your story-telling style is witty,

keep it up!

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

Monday, February 18, 2013 6:18 AM by Mcclung

Its such as you learn my mind! You seem to understand so much approximately

this, like you wrote the e-book in it or something. I believe that you simply can do with some % to pressure the message home a bit, however other than that, this is great blog. A great read. I will definitely be back.

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

Monday, February 18, 2013 6:45 AM by Krug

Hey there! I'm at work surfing around your blog from my new iphone 3gs! Just wanted to say I love reading your blog and look forward to all your posts! Keep up the superb work!

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

Monday, February 18, 2013 7:21 AM by Boren

I think that is one of the such a lot vital info for me.

And i'm happy studying your article. However should commentary on few common issues, The website style is ideal, the articles is in reality excellent : D. Just right process, cheers

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

Monday, February 18, 2013 10:56 AM by Damico

I could not refrain from commenting. Very well written!