Tech Kiddos

 There is something often said among IT professionals. [Warning: If you are a girl from my team and if you are weak-hearted, Please skip reading the next line.] Pretty girls always work in your neighbour team / project [and not in your (my) team]. Similarly, it is always the project of someone else, which will be very interesting to hear and work. You always happen to be in a montonous, boring-to-discuss and die-rather-to-code project. Even if you adjust with it as you do with your wife, it keeps on showing the ugly yellow face [page] to you, whatever the degree of your adventure in coding.

Such a project was one I discussed with my friend Mr.Anand. Have you seen Zazzle.com? If not, please drop by once. It is a piece of good work. It is an online selling portal – which sells things such as t-shirts, cups, shoes, and what not, after allowing the users to customize it with desired image / text. Customization can be done in the site. The great thing is, if you upload an image and try to put into the t-shirt or any item, the image makes itself twisted /  twirled / folded / rotated according to the background [a male / female model usually] body’s edges, i.e., folds or bends in the body. Anand had a similar requirement in a .NET project.

It is always the technology / challenge that motivates a good developer, and you see, we fall into the category of ‘very-good’ developer [ahem..!], so I started the development of it on my own interest being eager to know how to twist / resize images as per our wish programmatically. Here I give the code pertaining to the basic manipulation of an image using GDI+ [or whatever the hell..]. The end-result I achieved for the above requirement is something more than this ‘basic’ manipulations. It’ll be a good start for you to learn the processing of Image using ASP.NET.

There is this class in .NET – Bitmap, which allows us to create an image object in the memory, and load a physical image / create our own image. Available under System.Drawing Namespace. [you'll also need System.Drawing.Drawing2D, System.Drawing.Imaging namespaces for some features of processing]. Using Graphics class, you can avail several functionalities such as – Rotate, Resize (Scale), Clip, Draw shapes such as Ellipse, Rectangle, Path, Polygon, another Image, etc, Fill on an Image surface. These are  things that come out-of-box,  and you may learn with few tutorials.

There are two important methods under a Bitmap object. GetPixel and SetPixel. As you may understand, an Image is a large collection pixels ordered regularly / irregularly to produce a pattern. Each pixel has its own color. GetPixel allows you to get the color at point X,Y, whereas SetPixel allows you to set a color at Point X,Y. By manipulating these two methods, you may produce distorted effects in an image, such as bending, changing the shape into a parallelogram, or sine wave etc. Let’s see an example.

Load an physical image into Bitmap class.

 Bitmap b = new Bitmap(Server.MapPath(“AJ49075_5.jpg”));

Create a new Bitmap class to hold the changes. It may be somewhat bigger in size than the above bitmap, since distortions (like twisting) may need more space. For ex, if you make a rectangle into a parallelogram, the end-to-end width of the image is more than the actual width of the rectangle.

 Bitmap bNew = new Bitmap(100 + b.Width, 150 +b.Height, PixelFormat.Format64bppArgb);

And, let us assume that, you want to make the rectangular image into a parallelogram. We can achieve this, by having a slope in the X-axis of the image. To have a slope in an image, the X particles need a displacement by some distance horizontally when their Y particles stay in their actual position. Let us do that. Before doing it, let us make the new image’s background as transparent, otherwise the background will look black in the result. Add the below code.

 for (int x = 0; x < bNew.Width; ++x)
{
         for (int y = 0; y < bNew.Height; ++y)
         {
                  bNew.SetPixel(x, y, Color.Transparent);
          }
}

Now, Let us displace the particles through their X-axis. We have to get the pixel and its color from the old image (b), displace it, and paste it in the new image (bNew).

 for(int y = 0; y < b.Height; ++y)
{
    for (int x = 0; x < b.Width; ++x)
   {
        Color c1 = new Color();
        c1 = b.GetPixel(x, y);
        int xpix, ypix;
        xpix = x/2 + y;
        ypix = y;
     
        bNew.SetPixel(xpix, ypix, c1);
    }
}

Throw it to the Response, as shown below.

 Response.ContentType = “image/jpeg“; 

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

You can save it to a physical location, or even to a Stream object. ImageFormat can be changed to GIF, PNG, BMP, etc.

 Now, the results:

Actual Image:

 

 

 

 

 

Result Image after displacement code above:

 

 See ya..!