 |
Web Development »
ASP.NET »
General
Intermediate
Web Graphics On The Fly in ASP.NETBy Nick ParkerCreate web graphics on the fly with the ASP.NET quickly. |
C#, VB.NET 1.0, Win2K, WinXP, ASP.NET, Visual Studio, Dev
|
|
Advanced Search Add to IE Search |
|
|
|
||||||||||||||||
We all know what it is like when it comes to creating graphics for the web. Mind you, I find this to be a very tedious job, in fact many times I will try to avoid it. There have been other ways to create graphics on the fly, in fact you may wish to read an article written on VML posted here at The Code Project.
While there is nothing wrong using this or any other method available we all know the future ( at least in Microsoft�s eyes) is .NET. With that said, I would like to show you a method for creating dynamic graphics for the web in ASP.NET. Keep in mind that all of the following code will be done in VB.NET & C# as well.
The use of namespaces is vital in the .NET environment. We must import the proper namespaces to allow us to access the methods and properties we call in the following code below. I have updated this article to include the C# version of the code, you will notice how very similar they are.
�=====================================
�Include All Pertinent Namespaces Here
�=====================================
<%@ Page Language="VB" ContentType="image/jpeg" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Text" %>
<%@ Import Namespace="System.Drawing.Imaging" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<%
Response.Clear( )
Dim height As Integer = 100
Dim width As Integer = 200
Dim r As New Random
Dim x As Integer = r.Next(75)
Dim bmp As new Bitmap(width, height, PixelFormat.Format24bppRgb)
Dim g as Graphics = Graphics.FromImage(bmp)
g.TextRenderingHint = TextRenderingHint.AntiAlias
g.Clear(Color.Orange)
g.DrawRectangle(Pens.White, 1, 1, width-3, height-3)
g.DrawRectangle(Pens.Gray, 2, 2, width-3, height-3)
g.DrawRectangle(Pens.Black, 0, 0, width, height)
g.DrawString("The Code Project", _
New Font("Arial", 12, FontStyle.italic), _
SystemBrushes.WindowText, New PointF(x,50))
bmp.Save(Response.OutputStream, ImageFormat.Jpeg)
g.Dispose( )
bmp.Dispose( )
Response.End( )
%>
<%@ Page Language="C#" ContentType="image/jpeg" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Text" %>
<%@ Import Namespace="System.Drawing.Imaging" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<%
Response.Clear();
int height = 100;
int width = 200;
Random r = new Random();
int x = r.Next(75);
Bitmap bmp = new Bitmap(width, height, PixelFormat.Format24bppRgb);
Graphics g = Graphics.FromImage(bmp);
g.TextRenderingHint = TextRenderingHint.AntiAlias;
g.Clear(Color.Orange);
g.DrawRectangle(Pens.White, 1, 1, width-3, height-3);
g.DrawRectangle(Pens.Gray, 2, 2, width-3, height-3);
g.DrawRectangle(Pens.Black, 0, 0, width, height);
g.DrawString("The Code Project", new Font("Arial", 12, FontStyle.Italic),
SystemBrushes.WindowText, new PointF(x,50) );
bmp.Save(Response.OutputStream, ImageFormat.Jpeg);
g.Dispose();
bmp.Dispose();
Response.End();
%>
Response object. The variables height and width are defined
as the dimensions of our image, you can adjust as you wish or create a subroutine where you pass these values in. So far
this is rather rudimentary, nothing extremely extensive so far. Next we will declare a variable r to be of
type Random. The integer variable x on the next line is assigned a random value using r with
a seed value of 75, you can use whatever seed value you would like.
The next two objects that we create will be new for any ASP web developers. First we are to create a new Bitmap
object, this item will define the area to which we are doing our drawing on. There are three arguments that are passed to it,
the width and height of our image and the pixel format. There are a series of different pixel
formats to choose from, here is a detailed explanation of the
different types available to you.
Next we will use the graphics object to set the TextRenderingHint to TextRenderingHint.AntiAlias.
This allow us to take advantage of antialiasing characteristics when displaying fonts. Antialiasing allows you to get
ride of jagged lines in your text by blending shades of gray or color around the text to make it appear smoother.
On the next line we are actually setting the main color of our bitmap image. I choose Code Project orange for this
example :). In the next three lines we are actually going to begin drawing on our image. The method that
gets called is the same, only changing a few of the parameters. We are actually just drawing a framework at the edge of
the image. Essentially you can see that by the points being specified in the arguments list. Here is a breakdown of
how the DrawRectangle works; keep in mind the x and y coordinates are in terms
of the upper left hand corner:
g.DrawRectangle( [Pen],[x],[y],[width],[height] )Next we will actually draw some text onto our
Bitmap object. The DrawString method is overloaded
and takes a series of arguments that are specified like this for my example:g.DrawString( [String],[Font],For the first time we will go ahead and make a direct method call using the,[PointF] )
Bitmap object. The method
to save our bitmap is simply Save which is overloaded (big surprise) passing the outputstream object
and image format. Here is another list of options you have in regards to
your image format.
There have been questions regarding the next two lines of code, I am calling the Dispose method for both
the Graphics object and Bitmap object that we created. Even though .NET development can manage
our object(s) with respect to garbage collection, it is always a good idea to clear these items when you know you are done
with them. You can exclude these two calls and garbage collection will still take place, it's your call.
That�s all it takes to create dynamic graphics through the use of code alone.
Article on MSDN entitled: Create Snazzy Web Charts and Graphics On the Fly with the .NET Framework.
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 25 Nov 2002 Editor: Chris Maunder |
Copyright 2002 by Nick Parker Everything else Copyright © CodeProject, 1999-2009 Web13 | Advertise on the Code Project |
I will check into this when I get home, should be able to get something out for you. Thanks again. 
I just installed .Net SDK and the .NetSP2. Typed your C# code example with Notepad and saved as a .aspx page. When I tried with the browser, I received this error:
Thanks in advance for any hint. 
I think they should have had one of the two options set by default.
