This is a sample project to do image manipulation in ASP.NET projects, using .NET's GDI library, and related classes.
The project demonstrates dynamically 'Adding two images', 'creating zoom effects', and 'enlarging images'.
Some notes on displaying dynamically generated images
If we have to generate an image dynamically and show it on a webpage, we have to do the image generation coding on a separate page and call it in our
src="" attribute of the
This is the common and as-far-as I know, the only way to display dynamic images on a webpage, and not specific to the ASP.NET framework alone. It applies to whatever language and webserver you might use. And fortunately, this method is compliant with any client browser, since the process happens server-side.
You would typically use all (or some) of the below .NET namespaces to generate / load preexisting images.
You can draw lines, arcs and do a lot of things using the
Drawing namespace and the GDI/ GDI+ libraries... you should see articles on the same for doing that. In this article, we will only try manipulating pre-existing images.
The rest of this article will use classes and methods in the above mentioned namespaces.
Loading and Displaying an Image
To load and display an image, you would create a separate file such as imager.aspx and put no controls or anything on it... but just code for the
Page_Load event as below:
private void Page_Load(object sender, System.EventArgs e)
Bitmap objImage = new Bitmap(strBasePath + <A href="file://images//fruity.jpg">file: objImage.Save(Response.OutputStream,ImageFormat.Jpeg);
The above code loads an image from the images directory of the web project and pushes it to the
OutputStream which is the response header that will be sent to the client.
Done that, we can put a call to the image as mentioned before:
Ex1: Adding two images
Having discussed displaying a single image .. it's very obvious now as to how to add two images and send to the client.
The simplest way being to push two images to the response stream. Or you can add the two images to a new image and push this image to the response stream as below:
oCounter = new Bitmap(23,15);
oGraphics = Graphics.FromImage(oCounter);
Bitmap objImage = new Bitmap(strBasePath + <A href="file://images//1.gif">file:oGraphics.DrawImage(objImage,0,0);
objImage = new Bitmap(strBasePath + <A href="file://images//2.gif">file:oGraphics.DrawImage(objImage,11,0);
Note: when drawing the second image, it's important to paste it at the proper position.. or else it overwrites or draws itself over the old image... this we do by manipulating the top left position of the
drawimage() method, attributes...
int X, and
If you are wondering why I named the final image object
oCounter: typical application of adding two images would be generating 'hit counter' images for your clients.
Ex2: Zooming images
There are two ways of zooming an image.. or rather bringing out a zoom-effect on images.
- Enlarge the image to a larger size (this is discussed in the EX3).
- Copy a portion of the image and enlarge it to the size of the original image.
We discuss method (2) here.
In the sample project, I create the image using an
ImageButton aspx control. This is to allow users to click on the image and pass x, y params to the server so that the clicked area of the image is zoomed (or technically enlarged).
The only function to learn to do this is:
- a source
Rectangle (defining which portion is to be drawn),
- a destination
Rectangle (defining the target size and position of the image).
And if the destination rectangle is larger than the source rectangle, .NET automatically scales the image thereby getting our zooming effect.
Yes! This is important: "
DrawImage() scales the image automatically if needed".
In the above code block,
oItemp contains the image... the rest is clear I suppose.
Zoom - effect Logic
I think I should explain the logic I have used in my code (downloadable with this article - see top of article for download link).
What I do is I handle the image button click event, and get the x, y position where the user clicked on the image. I then do some basic calculation and mark my source rectangle around this click point...my source rectangle is 60% the size of the actual image itself. Since we discussed that source rectangle should be somewhere smaller than the destination rectangle for the scaling to happen. May be you can have a 50% size also, in which case the image gets zoomed more...
I allow the user to click on the enlarged image also.. that means zoom it further and further. I achieved this with the below logic:
I have two hidden fields on the form.. where I store the user clicked positions like:
xpos = 100 ypos = 200
On the second click, the hidden fields take the values:
xpos = 100,322 ypos = 200, 123
and so on.. so I have a track of all the clicks the user made. I then split this string of values and perform the zoom operation on the original image multiple times.
That means, if user clicked at 100,200 first time and on the zoomed image he clicked at 322,123, then in the second postback of the form, I scale the image twice using a
for loop every time at the respective points.
Hope that sounds clear. Anyways, the code is also well-documented.. and you will see it work as you break-into the code.
EX3: Enlarging the image (zoom-effect 2)
Auto-scaling doesn't alone happen with the
DrawImage() method, it also can happen when you load the image.
- load an image to actual size
- create an
Image object and load the object (from prev step), with a width and height
Bitmap oImg, oImgTemp;
oImgTemp = new Bitmap(strBasePath + <A href="file://images//fruity.jpg">file:oImg = new Bitmap(oImgTemp,600,400);
That's it.. the result is an enlarged image.
I worked through this example creating all bitmap objects from the class
But when I tried the zoom-effect Ex:2, the
Bitmap object won't scale to a new size whatever I do, .. but good fortunes, auto-scaling happened with the
The problem was with the
DrawImage() method which would not do auto-scaling for bitmap image objects (supplied as the first argument)..
Hence, the below wont work.
While, this will...
Suppose you zoom the image (in EX2) once or twice, and then click button 'Original' and then again zoom once.. you will see the wrong result. It would have zoomed once + no. of times zoomed earlier before pressing 'original'. The problem is I am not clearing the hidden fields when 'original' button is pressed.
I forgot this.. really. :o)
I have now updated the download on this page (as on 8/Apr/04).. If u don't have the new download.. the only correction is:
private void Button1_Click(object sender, System.EventArgs e)