Title: Combine three Images into single image in asp.net
Tags: c#;html;css;asp.net;image
Question: In my web application, I have 3 images I need to combine into a single images(vertical alignment) images. I have code for two images into single image but they are merged side by side. I need up and down and also how to add third image.

The code I found on the web:

I tried code for 2 images:

.aspx:

```<div&gt;
    <asp:Button ID="Button1" runat="server" Text="Merge" onclick="Button1_Click"/&gt;    
    <asp:Image ID="Image1" runat="server"  ImageUrl="~/Images/Flower2.jpg"  Height="129px" Width="210px"/&gt;<br /&gt;
    <asp:Image ID="image2" runat="server" ImageUrl="~/Images/Flower4.jpg"  Height="129px" Width="210px"/&gt;<br /&gt;       
    <asp:Image ID="MergedCombinedImage" runat="server" /&gt;
</div&gt;
```

.cs

```protected void Button1_Click(object sender, EventArgs e)
{
    string img1path = MapPath("~/Images/Flower2.jpg");
    string img2path = MapPath("~/Images/Flower4.jpg");         

    // Load two Images to be combined into Image Objects

    System.Drawing.Image img1= System.Drawing.Image.FromFile(img1path);
    System.Drawing.Image img2= System.Drawing.Image.FromFile(img2path);

    // Create a Resultant Image that’ll hold the above two Images
    //Here i am creating the final image with width as combined width of img1 and img2 and height as largest height among img1 and img2

    using (Bitmap FinalBitmap = new Bitmap(img1.Width + img2.Width, img2.Height &gt; img1.Height ? img2.Height : img1.Height)) //This condition how can i add img3 
    {
        using (Graphics FinalImage = Graphics.FromImage(FinalBitmap))
        {
            // Draw the first image staring at point (0,0) with actual width and height of the image, in final image
            FinalImage.DrawImage(img1, new Rectangle(0, 0, img1.Width, img1.Height));                 
            // and Draw the second image staring at point where first image ends in the final image and save changes
            FinalImage.DrawImage(img2, img1.Width, 0);
            FinalImage.Save();
            // Write the bitmap to an image file and you’re done
            FinalBitmap.Save(MapPath("~/ResultImages/Outputimg.jpg"));
            MergedCombinedImage.ImageUrl = "~/ResultImages/Outputimg.jpg";
        }
    }
}
```


Here is the accepted answer: Well, the code you have is merging it side by side. Actually, all of it is. I guess you didn't write it yourself, but instead just grabbed it from somewhere. All you really need to do is a small swap in the logic and you are done:


The new bitmap you instantiate is a sum of both widths and the max height out of the two images is chosen. You need to swap this to be a sum of max heights and the max width.
Then you draw the first image to it's full size. This can be left untouched.
Then you proceed to draw the second image at the X that corresponds to where the first image ends. Instead, you should set the starting X coordinate for the second image to 0 and the Y coordinate to the first image's height. 


Comment for this answer: Check the line where you are instantiating the final image, as well as the line where you draw the second image. Somewhere you are not providing the correct height. Just to be sure, add the changes you ended up with as a second code block, this way we don't have to be guessing.
Comment for this answer: Hi Boris Makogonyuk, i followed your instructions and i did changes in my code but i get result image vertically formed but second image not showing properly i attached image to my code i updated with image name like `Image Not form well` my code please see once
Comment for this answer: `using (Bitmap FinalBitmap = new Bitmap(img1.Height + img2.Height, img2.Width > img1.Width ? img2.Width : img1.Width))` The first argument for the Bitmap constructor is Width and then Height. Just swapping the property called does not change the order of the parameters automagically for you. Change it to `using (Bitmap FinalBitmap = new Bitmap(img2.Width > img1.Width ? img2.Width : img1.Width, img1.Height + img2.Height))`
Comment for this answer: i made changes what your said i updated my code can you please see my updated code and please tell me where i did mistake
Comment for this answer: Yes, but you would need to calculate the total Width and Height separately first and then iterate through the collection of images drawing them in whatever order you want. Try doing it yourself first and if you can't figure it out - open a new question. People will help you with your code, maybe even with someone's code, but nobody will write it for you. Here is an example of merging multiple images into one: http://stackoverflow.com/questions/13248897/merge-an-array-of-bitmaps-into-a-single-bitmap
Comment for this answer: Hi, thank you for your responding, By using the above code is it possible to take multiple images and merge into single image.can you please tell me. I need to add another image and how can i take  `using (Bitmap FinalBitmap = new Bitmap(img2.Width > img1.Width ? img2.Width : img1.Width, img1.Height + img2.Height))`  this condition into another image and is it possible to take multiple images.Please tell me


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:12/15/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<c#><html><css><asp.net><image>', 'Title': 'Combine three Images into single image in asp.net', 'ViewCount': 1119, 'id': 41158309, 'user_AboutMe': None, 'user_AccountId': None, 'user_DisplayName': None, 'user_Reputation': None, 'user_Views': None, 'user_id': None}}