Introduction
We can create images dynamically very easy in ASP.NET using .Net framework. .Net framework classes have various capabilities of image manipulation.
.Net framework classes offer several classes for image creation and manipulation. These classes are useful for developers to draw various shapes, create text and generate images of any type like Jpeg, Gif, and BMP etc.
This article explains how to create images at run time.
Create a Text Image at Runtime
To create images the namespace used id System.Drawing this namespace contains two classes System.Drawing.Bitmap and System.Drawing.Graphics, useful for us at present.
To demonstrate simple dynamic ASP.NET image generation, we'll create an ASP.NET Web page with two dropdown boxes, one text box, and a button. The first dropdown box allows us to choose the background color of our image, while the second allows us to select a font. The text box will receive the text that will be displayed on the image, and the button will generate the image.
The first in creating dynamically generated image is to create a new instance of Bitmap object, and to specify the width and height of the bitmap we are generating.
Bitmap oBmp1 = new Bitmap(460,60);
The next step in our process is to create a new Graphics object whch will allow us to draw on our bitmap.
Graphics oGrp1 = Graphics.FromImage(oBmp1);
We then declare a structure of type System.Drawing.Color, which will define the background color of our dynamic image.
System.Drawing.Color ocolor = new Color();
Now we need to get the values given by the user in Text Box and the two Dropdown lists.
string sColor = DropDownList1.SelectedItem.Text;
string sText = TextBox1.Text;
string sFont = DropDownList2.SelectedItem.Text;
Now we have to set oColor depending on sColor.
if(sColor == "Yellow")
{
ocolor = Color.Yellow;
}
else if(sColor == "Blue")
{
ocolor = Color.Blue;
}
else if(sColor == "Green")
{
ocolor = Color.Green;
}
Next, we create two brushes, which will help us to draw our image. The first one, oBrush, will be used to draw the background of the image:
SolidBrush oBrush = new SolidBrush(ocolor);
The second brush will be used to draw the text entered by the user; we hardcode the brush color as white.
SolidBrush oBrushWrite = new SolidBrush(Color.White);
We're going to use the first brush to fill the image rectangle, because the default color of new bitmaps is black. We call the FillRectangle method of oGraphic to paint the background in the color selected by the user (oColor):
oGrp1.FillRectangle(oBrush,0,0,500,75);
So far, we've changed the background color of our image, but we haven't written any text. We'll use the DrawString method of the oGraphic object to do that. The DrawString method has several overloads. This is the one we're going to use:
DrawString(String,Font,Brush,Fpoint);
The first parameter is just the string that we want to write; the second parameter defines the font to be used; the third parameter defines a brush (this will be the second brush we created above); the last parameter defines a drawing starting point relative to the top-left corner of our image. Before we call the DrawString method, however, we need to create an instance of the Font class, and FPoint structure that defines the point at which drawing should start.
The user chose a font for the text, so we pass sFont as the first parameter, and hardcode the second parameter, which defines the font size:
Font oFont = new Font(sFont,13);
PointF oPoint = new PointF(5F,5F);
so now we created instances of Font and PointF and now DrawString parameters are ready:
oGrp1.DrawString(sText,oFont,oBrushWrite,oPoint);
Now the last thing is we have to send the image to browser for that.
Response.ContentType = "image/jpeg" ;
oBmp1.Save (Response.OutputStream, ImageFormat.Jpeg);
That's all we generated a Text image dynamically at run time.
The below image shows the sample output: