Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET
Article

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

Rate me:
Please Sign up or sign in to vote.
4.54/5 (36 votes)
6 Apr 20045 min read 398.1K   8.6K   133   28
.NET image manipulation examples, as an ASP.NET Project. Good application-savvy effects.

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.

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

C#
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 + <A href="file://images//fruity.jpg">file://images//fruity.jpg</A>);
     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:

HTML
<img src="imager.aspx"/>

Ex1: Adding two images

Sample screenshot

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:

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

Bitmap objImage = new Bitmap(strBasePath + <A href="file://images//1.gif">file://images//1.gif</A>);
oGraphics.DrawImage(objImage,0,0);
objImage = new Bitmap(strBasePath + <A href="file://images//2.gif">file://images//2.gif</A>);
oGraphics.DrawImage(objImage,11,0);
C#
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

Sample screenshot

Sample screenshot

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:

C#
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".

C#
//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...

C#
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
C#
Bitmap oImg, oImgTemp;
oImgTemp = new Bitmap(strBasePath + <A href="file://images//fruity.jpg">file://images//fruity.jpg</A>);
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.

C#
//oBitmap is an instance of class 'Bitmap'
oGraphics.DrawImage(oBitmap,desRect,sourceRect,GraphicsUnit.Pixel);

While, this will...

C#
//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:

C#
//in index.aspx.cs page
private void Button1_Click(object sender, System.EventArgs e)
{
  ImageButton1.ImageUrl="imager.aspx";
  txtPosX.Value="";
  txtPosY.Value="";
}

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here



Comments and Discussions

 
QuestionHi Pin
Forcasual Things29-Jul-15 6:26
Forcasual Things29-Jul-15 6:26 
Questionthanks Pin
mez018-Dec-12 9:09
mez018-Dec-12 9:09 
GeneralMy vote of 5 Pin
Josep Balague21-Jul-10 23:38
professionalJosep Balague21-Jul-10 23:38 
GeneralIn VB Pin
david4life8-Feb-09 9:14
david4life8-Feb-09 9:14 
Is this code available in VB?

LifeTime

Questionhow to rotate image Pin
Shakti khurana14-Oct-08 3:14
Shakti khurana14-Oct-08 3:14 
GeneralAdd two bmp images Pin
msurni24-Aug-08 23:19
msurni24-Aug-08 23:19 
GeneralIMPORTANT: standards browser compliance Pin
metalmonkey3-Apr-08 15:58
metalmonkey3-Apr-08 15:58 
AnswerI need your code Pin
Member 428602626-Feb-08 18:11
Member 428602626-Feb-08 18:11 
Generalasp imaging Pin
Member 365008411-Feb-07 17:53
Member 365008411-Feb-07 17:53 
GeneralExcellent work done Pin
Imran Saiyed6-May-06 21:46
Imran Saiyed6-May-06 21:46 
Questionzooming Pin
K.SARAVANA KUMAR26-Jan-06 19:50
K.SARAVANA KUMAR26-Jan-06 19:50 
QuestionHow to pan the image Pin
kumarrajt2-Dec-05 0:20
kumarrajt2-Dec-05 0:20 
Questioncan we zoom out the image Pin
kumarrajt30-Nov-05 22:13
kumarrajt30-Nov-05 22:13 
AnswerRe: can we zoom out the image Pin
User 307351-Dec-05 20:37
professionalUser 307351-Dec-05 20:37 
Generalunable to load the jpg image Pin
kumarrajt30-Nov-05 0:38
kumarrajt30-Nov-05 0:38 
Questionabout enlarging image which will be retrieved from database Pin
RA200219-Nov-05 19:01
RA200219-Nov-05 19:01 
AnswerRe: about enlarging image which will be retrieved from database Pin
User 3073520-Nov-05 8:24
professionalUser 3073520-Nov-05 8:24 
GeneralRe: about enlarging image which will be retrieved from database Pin
RA200222-Nov-05 17:44
RA200222-Nov-05 17:44 
GeneralAutomatic image resize Pin
zioturo3-Nov-05 21:45
zioturo3-Nov-05 21:45 
GeneralLoad Images Pin
Member 195100712-Jul-05 6:42
Member 195100712-Jul-05 6:42 
GeneralZooming Pin
CarmelJohn13-Sep-04 12:09
CarmelJohn13-Sep-04 12:09 
GeneralAbout loading and displaying img Pin
ArpanetGuru15-Jun-04 20:02
ArpanetGuru15-Jun-04 20:02 
GeneralOnline test Pin
kraftspl6-May-04 11:34
kraftspl6-May-04 11:34 
Generalabout Multiple Zooming Pin
xidu7-Apr-04 5:54
xidu7-Apr-04 5:54 
GeneralRe: about Multiple Zooming Pin
User 307357-Apr-04 18:37
professionalUser 307357-Apr-04 18:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.