Creating Bitmaps from user input string
Introduction
This article introduces you to creating custom bitmaps from an input string.
The code for this article is written in C# and ASP .NET, and for the application
to run on your machine, you must have .NET Framework 1.1, IIS (Internet Information
Services) with Front Page Extension installed and configured. Also this code
requires write permissions on the folder for the relevant asp .net application
identity.
Getting to work
Let's begin by creating a C# ASP.
NET Application. Launch Visual Studio .NET. Click File ->New -> Project and select the item
Visual C# Projects in the left pane of the New Project dialog . In the right
pane,
select the ASP .NET Web Application.
By default, Visual Studio .NET
names your Web application project WebApplication with an
appended number, for example, WebApplication1, but you should
always enter a specific name. Click in the Name field and
enter CustomBitmapFromString.
Check the Location field; it should contain the name of
the Web server you want to host this application. Typically, this will read http://localhost.
However, you may create a project on any Web server for which you have sufficient
permissions
to create a virtual directory and write files. Make sure the information you
entered is correct, and then click OK. Visual Studio .NET will create the new
project.
Now that we have the project
done, we'll need to add some controls. From the Toolbox (View
-> Toolbox or Ctrl+Alt+X ), drag and
drop a Label control. From the Properties window
(the Label control must be
selected) set the label's
Text property to "Please enter a string:", and then modify
its size so that the text would fit into one row. You can also change the
name,
color and other properties of the Label, but I'll leave
the default ones. You are welcome to change them if you like.
We also need to add a TextBox control, to allow the user to
enter the string. So drag and drop it from the Toolbox. Also,
a Button control would be nice.
Let's set the ID of the button to btn_create,
and set its Text to "Create
Image". Also add a Picture control, to display the image that we'll create into
it.
After these steps, your application should look like in the picture below(don't
worry if your application looks different, the accent here in on coding, and
i'm sure that my design isn't the best):
Now, let's get to coding.
Double-click the Button and
Visual Studio .NET will create for you a method called btn_create_Click.
In this method we
will add our code for the image generation. First, we must test if the TextBox has any text in it, so we will add a condition:
if(TextBox1.Text=="")
{
Response.Write("Please enter some text in the TextBox!!!");
}
|
What I did was test if the text from the TextBox is empty.
If this happens, don't process further and write a message. If the text is
not empty, we start processing it:
else
{
//start processing...
}
|
First of all, we must create a Bitmap object on witch we draw.
Bitmap b = new Bitmap(1, 1);
The parameters represent the
height and weight of the bitmap. They are not important right now, we will
modify them later.
Next, we create a Font object, witch represents the font of
the text that we will draw on the bitmap.
Font f = new Font("Arial",
24);
"Arial" is the name of the font I've chosen, but it can be any
known font (that is installed on your machine). "24" is the size.
Graphics graphics = Graphics.FromImage(b);
The Graphics object is used to draw on the bitmap the string we entered in
the TextBox, and is created from our previously declared Bitmap.
int width = (int)graphics.MeasureString(TextBox1.Text,f).Width;
int height= (int)graphics.MeasureString(TextBox1.Text,f).Height;
|
We need to declare two integers
that we will use to store the width and height of our bitmap. These integers
are also initialized with the width/height of
our string object, drawn with the font previously declared. Now it's time to
modify the bitmap with the known width/height.
b = new Bitmap(b,new Size(width, height));
The bitmap object was modified, so we also need to modify the graphic context
for the new bitmap. We'll do just that:
graphics = Graphics.FromImage(b);
graphics.Clear(Color.DarkBlue);
Also, we need a background color for the bitmap, and I have chose it to be
DarkBlue, you can try some other color. We have now reached
the point where
we draw the text we've typed in the textbox on the bitmap
graphics.DrawString(TextBox1.Text,f,new SolidBrush(Color.White),0, 0);
graphics.Flush();
What DrawString does
is draw a string on a Graphics object, using a Font,
a
SolidBrush (the color of the brush would be the color of the
text) at specified
coordinates (here, are (0, 0)). Finally, the Flush method forces all pending operations on the Graphics object
to finish.
Now that we've finished drawing on the bitmap, we need to display it
in the Image object. The problem is that our bitmap is in memory, not on the
drive, so we cannot use the ImageUrl property. Since we have no other alternative,
we need to save the image on the drive, and then load it using the ImageUrl property. So we do that:
b.Save("C:\\test.gif",System.Drawing.Imaging.ImageFormat.Gif);
Image1.Height = height;
Image1.Width = width;
Image1.ImageUrl = "C:\\test.gif";
|
First we save out Bitmap object as gif, then we set the the width/height of
our Image object to the width/height of our image and finally we set the ImageUrl property
to the path of our saved image.
Run the application.
This is how the program looks on my computer:
That's the end of our lesson. Hope you had as much fun as I did.
Good luck and happy programming,
Raul POPESCU
Attachments:
Project Files : aspnet_image_generation.zip