Converting Text into Image On-The-Fly

Tags: ASP.NET, C#, Graphics, Tools

Friday, November 7, 2008 3:36:00 AM

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

19 Comments

  • Vivek said

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

  • Vipin Vij said

    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.

  • Yanesh Tyagi said

     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

  • BartDeVries said

    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

  • Bart said

    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

  • Andy said

    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

  • BartDeVries said

    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

  • Musselman said

    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

  • Nowell said

    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.

  • Wharton said

    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.

  • Mcclung said

    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.

  • Krug said

    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!

  • Boren said

    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

Comments have been disabled for this content.