How can I create from two images a new image which inside there will be the two images side by side?

Question

I tried this code:

private void CreateAnimatedGif(string FileName1 , string FileName2)
        {
            Bitmap file1 = new Bitmap(FileName1);
            Bitmap file2 = new Bitmap(FileName2);
            Bitmap bitmap = new Bitmap(file1.Width + file2.Width, Math.Max(file1.Height, file2.Height));
            using (Graphics g = Graphics.FromImage(bitmap))
            {
                g.DrawImage(file1, 0, 0);
                g.DrawImage(file2, file1.Width, 0);
            }
            bitmap.Save(@"d:\test.gif", System.Drawing.Imaging.ImageFormat.Gif);
        }

In general it's working. But the result is not good enough.

The first image since the code try to make it in same size in the height I see some black space on the bottom.
The second image is bigger then the first one. The second image is on the right. So I need that it will make the left image the first one to be the same size/resolution of the second one.

How can I fix this code for that?

This is an example of the new image result after combined the two. And why it's not good as I wanted:

enter image description here

Just updated my question and also added an image example and why it's not good yet. — Jhonatan Birdy, Jan 29 '13 at 17:05
If you want to change the size of the original image, you need to use one of the overloads of DrawImage that changes the size: http://msdn.microsoft.com/en-us/library/system.drawing.graphics.drawimage(v=vs.71).aspx — mbeckish, Jan 29 '13 at 17:06
Since the left and right images can have different aspect ratios, how are you planning on getting rid of all the unused black space? Distort one of the images to a new aspect ratio? — mbeckish, Jan 29 '13 at 17:08
Yes to change the aspect ratio somehow of the left image. So it wont have the black space maybe I lose some quality but it's ok. — Jhonatan Birdy, Jan 29 '13 at 17:11

score 1 · Accepted Answer · edited May 23 '17 at 12:21

You can resize the left image and set some graphics property to get a better quality and try to don't lose the quality:

using (Graphics g = Graphics.FromImage(bitmap))
{       
     //high quality rendering and interpolation mode
     g.SmoothingMode = SmoothingMode.HighQuality; 
     g.PixelOffsetMode = PixelOffsetMode.HighQuality; 
     g.InterpolationMode = InterpolationMode.HighQualityBicubic;

     //resize the left image
     g.DrawImage(file1, new Rectangle(0, 0, file1.Width, file2.Height));
     g.DrawImage(file2, file1.Width, 0);
}

The result is:

enter image description here

Or if you want to resize it proportionally to the new height just use:

//calculate the new width proportionally to the new height it will have
int newWidth =  file1.Width + file1.Width / (file2.Height / (file2.Height - file1.Height));
Bitmap bitmap = new Bitmap(newWidth + file2.Width, Math.Max(file1.Height, file2.Height));
using (Graphics g = Graphics.FromImage(bitmap))
{       
     //high quality rendering and interpolation mode
     g.SmoothingMode = SmoothingMode.HighQuality; 
     g.PixelOffsetMode = PixelOffsetMode.HighQuality; 
     g.InterpolationMode = InterpolationMode.HighQualityBicubic;

     //resize the left image
     g.DrawImage( file1, new Rectangle( 0, 0, newWidth, file2.Height ) );
     g.DrawImage(file2, newWidth, 0);
}

Infact the result is better:

enter image description here

Fuex this is working. And if I wanted to make the left iamge to be square so the two images will be half half ? Or to move stretch a bit the left image to the right so it will be square instead of rectangle like it is now ? In the original the left image was square. So even if I lose again some quality could you show me tha part and how to change it make it square I mean stretch it to the right a bit. — Jhonatan Birdy, Jan 29 '13 at 18:04

How can I create from two images a new image which inside there will be the two images side by side?

1 Answers1