ASP.NET Image Manipulation Examples: Adding, Zooming, Enlarging

• Download source files - 32.3 Kb

Introduction

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 <img> tag.

<img src="imager.aspx"/>

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.

Generating images

You would typically use all (or some) of the below .NET namespaces to generate / load preexisting images.

using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;

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 + "file://images//fruity.jpg">file://images//fruity.jpg);

     objImage.Save(Response.OutputStream,ImageFormat.Jpeg);
     objImage.Dispose();
}

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:

<img src="imager.aspx"/>

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:

Bitmap oCounter;
Graphics oGraphics;

oCounter = new Bitmap(23,15);
oGraphics = Graphics.FromImage(oCounter);

Bitmap objImage = new Bitmap(strBasePath + "file://images//1.gif">file://images//1.gif);

oGraphics.DrawImage(objImage,0,0);
objImage = new Bitmap(strBasePath + "file://images//2.gif">file://images//2.gif);

oGraphics.DrawImage(objImage,11,0);

oCounter.Save(Response.OutputStream,ImageFormat.Jpeg);

objImage.Dispose();
oCounter.Dispose();

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 int Y.

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.

1. Enlarge the image to a larger size (this is discussed in the EX3).
2. 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:

Graphics.DrawImage()

DrawImage() accepts:

• 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".

//get the portion of image(defined by sourceRect)

//and enlarge it to desRect size...gives a zoom effect.

////if image has high resolution.. effect will be good.

oGraphics.DrawImage(oItemp,desRect,sourceRect,GraphicsUnit.Pixel);

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

float iPortionWidth=(0.60f*oI.Width);
float iPortionHeight=(0.60f*oI.Height);
//oI is the image.

Multiple zooms..

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.

Steps:

1. load an image to actual size
2. create an Image object and load the object (from prev step), with a width and height

Bitmap oImg, oImgTemp;
oImgTemp = new Bitmap(strBasePath + "file://images//fruity.jpg">file://images//fruity.jpg);

oImg = new Bitmap(oImgTemp,600,400);

That's it.. the result is an enlarged image.

Observation:

I worked through this example creating all bitmap objects from the class Bitmap.

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 Image object.

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.

//oBitmap is an instance of class 'Bitmap'

oGraphics.DrawImage(oBitmap,desRect,sourceRect,GraphicsUnit.Pixel);

While, this will...

//oItemp is an instance of class 'Image'

oGraphics.DrawImage(oItemp,desRect,sourceRect,GraphicsUnit.Pixel);

Change History:

Change 1:

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:

//in index.aspx.cs page

private void Button1_Click(object sender, System.EventArgs e)
{
  ImageButton1.ImageUrl="imager.aspx";
  txtPosX.Value="";
  txtPosY.Value="";
}