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 tomodify 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