Click here to Skip to main content
Click here to Skip to main content

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

, 6 Apr 2004
Rate this:
Please Sign up or sign in to vote.
.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.

<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 + <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:

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

Bitmap oCounter;
Graphics oGraphics;
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);
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:

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

//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. Blush | :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="";
}

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

Share

About the Author

Harish loves computers for their basic quality of running tasks given and doing things clockwork without day-dreaming like him.
 
Note: My employer does not subscribe to my thoughts posted in my articles.
Follow on   Twitter   LinkedIn

Comments and Discussions

 
Questionthanks Pinmembermez018-Dec-12 10:09 
GeneralMy vote of 5 PinmemberJosep Maria Roy22-Jul-10 0:38 
GeneralIn VB Pinmemberdavid4life8-Feb-09 10:14 
Questionhow to rotate image Pinmembershaktisanjeev14-Oct-08 4:14 
GeneralAdd two bmp images Pinmembermsurni25-Aug-08 0:19 
GeneralIMPORTANT: standards browser compliance Pinmembermetalmonkey3-Apr-08 16:58 
AnswerI need your code PinmemberMember 428602626-Feb-08 19:11 
Generalasp imaging PinmemberMember #365008411-Feb-07 18:53 
GeneralExcellent work done PinmemberImransyed636-May-06 22:46 
Questionzooming PinmemberK.SARAVANA KUMAR26-Jan-06 20:50 
QuestionHow to pan the image Pinmemberkumarrajt2-Dec-05 1:20 
Questioncan we zoom out the image Pinmemberkumarrajt30-Nov-05 23:13 
I have downloaded the code given.It is working ,but it is only for zooming in.
I would like to zoom out the image.
Please give me the hint to do it.
 
Raj
AnswerRe: can we zoom out the image PinmemberHarish Palaniappan1-Dec-05 21:37 
Generalunable to load the jpg image Pinmemberkumarrajt30-Nov-05 1:38 
Questionabout enlarging image which will be retrieved from database Pinmemberfarhana afroz19-Nov-05 20:01 
AnswerRe: about enlarging image which will be retrieved from database PinmemberHarish Palaniappan20-Nov-05 9:24 
GeneralRe: about enlarging image which will be retrieved from database Pinmemberfarhana afroz22-Nov-05 18:44 
GeneralAutomatic image resize Pinmemberzioturo3-Nov-05 22:45 
GeneralLoad Images PinmemberJineteMarmoreo12-Jul-05 7:42 
GeneralZooming PinsussJHarcourt13-Sep-04 13:09 
GeneralAbout loading and displaying img PinmemberArpanetGuru15-Jun-04 21:02 
GeneralOnline test Pinmemberkraftspl6-May-04 12:34 
Generalabout Multiple Zooming Pinmemberxidu7-Apr-04 6:54 
GeneralRe: about Multiple Zooming PinmemberHarish Palaniappan7-Apr-04 19:37 
GeneralRe: about Multiple Zooming Pinmemberahnan7-Apr-04 20:05 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 7 Apr 2004
Article Copyright 2004 by Harish Palaniappan
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid