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

19 Comments

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

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

  •  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

  • 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

  • Hi yanesh good example..
    Can we get the image with good clarity is there any way?

  • 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

  • Nice Buddy!
    hanks a lot for ur time and ur wrk

  • 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

  • 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

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

  • 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

  • I pay a quick visit day-to-day some sites and blogs to read articles,
    except this web site provides feature based posts.

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

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

  • Hi there, I check your blogs regularly. Your story-telling style is witty,
    keep it up!

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

  • 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!

  • 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

  • I could not refrain from commenting. Very well written!

Comments have been disabled for this content.