Click here to Skip to main content
13,766,878 members
Click here to Skip to main content
Add your own
alternative version


37 bookmarked
Posted 26 Dec 2006

Image Zooming,Chopping and Panning in,C# like Google Maps.

, 26 Dec 2006
Rate this:
Please Sign up or sign in to vote.
An article on image operations giving user power of win forms

Sample Image - Web_Image_Operations.gif


Sometime we always want our web applications to work as desktop application. We are influenced by Google maps or I have some findings how these stuff works. The process is interesting as it includes dynamic loading of information on UI through mouse events. I do not want to go for components and also want same precision. Image zooming, panning are tedious tasks as they are easy to perform on win forms rather that web interfaces. But as Web 2.0 grows, user gets more spoiled and developers need more to work on their minds. Finally, as web changes, our application too.

Using the code

Zooming image by adding pixels will irritate users. Again Rendering image content on mouse events in Response streams will cause Server RAM to extremely heavy loaded and exposed to memory leaks and server crashes. So finally giving users the flexibility of interface and extreme speed we have many ways. There are 2 parts of any such zooming or panning functionality.

Front End: UI.
In UI,I can for any of belowing ways.
1) Using Flash Component Zoomify.


2) Using GVIS.


Back End: Image Manipulations.
First of all, image of any size will be overlapped on square box. For any image, value of Height/Width is multiplied with 2 till both height and width becomes same.
// e.g.       Image Height:3000px
//            Width 2400px

int sHeight = 1, sWidth = 1;
While (sWidth < 2400 || sHeight < 3000)
    sHeight = sHeight * 2;
    sWidth = sWidth * 2;

So finally we are prepared with square image, with original image in center. Now its time to divide entire image in tile, each of uniform size. This small image part as tile will be rendered on mouse events. Process of chopping image requires special mathematical calculation.

Chopping Process.

For first time, Image size will be full size, Zoom level be 1, and quadrant co- ordinates will be 0, 0. So result will be 4 pieces, each of uniform size, a) Take each part and divide into further 4 equal squares of uniform size. Follow process (a) until each piece becomes equal to your smallest tile [I took 255 PX]. Every time you call repetitive process to divide images, increase zoom level + 1 and shift quadrant co-ordinates.So you will have:

  1. Top-Left (0,0)
  2. Top-Right (0,1)
  3. Bottom-Left (1,0)
  4. Bottom-Right (1,1)
imgTopLeft = SubDivide(objImg, Level + 1, Quadrant0 * 2 + 0,
                       Quadrant1 * 2 + 0);
imgTopRight = SubDivide(objImg, Level + 1, Quadrant0 * 2 + 0,
                        Quadrant1 * 2 + 1);
imgBottomLeft = SubDivide(objImg, Level + 1, Quadrant0 * 2 + 1,
                          Quadrant1 * 2 + 0);
imgBottomRight = SubDivide(objImg, Level + 1, Quadrant0 * 2 + 1,
                           Quadrant1 * 2 + 1);

Continue to save your each square through

dGraphics.DrawImage(imgTopLeft, new Rectangle(0, 0, Size[0], Size[1]),
          0, 0, imgTopLeft.Width, imgTopLeft.Height, GraphicsUnit.Pixel);
dGraphics.DrawImage(imgTopRight, new Rectangle(0, Size[1], Size[0],
          Size[1]), 0, 0, imgTopRight.Width,
          imgTopRight.Height, GraphicsUnit.Pixel);
dGraphics.DrawImage(imgBottomLeft, new Rectangle(Size[0], 0, Size[0],
          Size[1]), 0, 0, imgBottomLeft.Width, imgBottomLeft.Height,
dGraphics.DrawImage(imgBottomRight, new Rectangle(Size[0], Size[1],
          Size[0], Size[1]), 0, 0, imgBottomRight.Width,
          imgBottomRight.Height, GraphicsUnit.Pixel);

One more thing,we need to make sure that our zoom level should not exceed scale level. So,for generation of last square we need to perform this check.

int Scale = Convert.ToInt32(System.Math.Pow(2, Level));
int[] InverseSize ={ (objBmp.Width) / (Size[0] * Scale),
                     (objBmp.Height) / (Size[1] * Scale) };
int[] TopLeft ={ Quadrant0 * Size[0] * InverseSize[0],
                 Quadrant1 * Size[1] * InverseSize[1] };
int[] BottomRight = { TopLeft[0] + (Size[0] * InverseSize[0]),
                      TopLeft[1] + (Size[1] * InverseSize[1]) };

if (InverseSize[0] < 1.0 || InverseSize[1] < 1.0)
    throw new Exception("Requested zoom Level  is too high");

Finally we have large number of images that are chopped in perfect squares at every level. Also, there is common format for naming convention for chopped images. If its saved in [Level]-[Quadrant0]-[Quadrant1].jpg, it will be supported by different rendering UI components like Zoomify or GAV. I have used Image encoders and compressors for image soothing. You can pass quality level for image and get it your desired one.

Points of Interest

So we are now with image zoomifier with indepth process of calculations.Just simple maths.Hope you enjoyed it.


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


About the Author

Atit Patel
Web Developer
India India
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionLarge Images Pin
Armand16-May-12 11:57
memberArmand16-May-12 11:57 
General+ _ buttons are not working Pin
vikascdac14-Feb-07 0:48
membervikascdac14-Feb-07 0:48 
GeneralRe: + _ buttons are not working Pin
Atit Patel14-Feb-07 9:11
memberAtit Patel14-Feb-07 9:11 
GeneralRe: + _ buttons are not working Pin
vikascdac14-Feb-07 23:26
membervikascdac14-Feb-07 23:26 
Generalhi Boss Pin
Shyam Miyatra1-Feb-07 0:05
memberShyam Miyatra1-Feb-07 0:05 
GeneralSource Code & Demo Project's Links aren't working Pin
248912826-Dec-06 19:44
member248912826-Dec-06 19:44 
GeneralRe: Source Code & Demo Project's Links aren't working Pin
Atit Patel26-Dec-06 23:21
memberAtit Patel26-Dec-06 23:21 
GeneralRe: Source Code &amp; Demo Project's Links aren't working Pin
Nirosh27-Dec-06 1:48
professionalNirosh27-Dec-06 1:48 
GeneralSource code missing Pin
Tony Bermudez26-Dec-06 16:26
memberTony Bermudez26-Dec-06 16:26 
GeneralRe: Source code missing Pin
Atit Patel26-Dec-06 23:31
memberAtit Patel26-Dec-06 23:31 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05-2016 | 2.8.181114.1 | Last Updated 26 Dec 2006
Article Copyright 2006 by Atit Patel
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid