How to place maximum images in a blank Bitmap based on column/row input & margin variables and preserving aspect ratio of images

Question

This might be a tricky question.

I will just cut to the chase. First i make a blank Bitmap image:

Bitmap MasterImage = new Bitmap(PageSize.Width, PageSize.Height, PixelFormat.Format32bppArgb);
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(MasterImage);

Afterwards: I get a parameter of how much images i want to place in the Blank Bitmap (page) based on columns and rows:

int numOfColumns=2; //(could be any value)
int numOfRows=4;

So we should get something like this:

I also get a parameter if i have some margin at top image and left image:

int PagetopMargin=0; //(could be any value)
int PageLeftMargin=0;

Than i have a variable called: imagesPath which is type of List<String> it contains full path of images.

Now i loop through images:

  while (imagesPath.Count > 0)
   {
      Image image = Image.FromFile(imagesPath[0]);
    //Logic comes here. 
    //after finishing processing and drawing images in Bitmap i remove image from list
      imagesPath.RemoveAt(0);
    }

What i am trying to achieve is how to place maximum images in that Bitmap page based on column/row and margin variables and preserving aspect ratio of images. (so images wont get distorted). if some images are left behind, its okey, i will continue next blank Bitmap to place them. just need to fill the Bitmap blank image to the full.

Answer 1

Here is a function to fit a rectangle into another, either centered or uncentered (aligned top-left):

Rectangle FitToBox(Rectangle scr, Rectangle dest, bool centered)
{
    var ratioX = (double)dest.Width / scr.Width;
    var ratioY = (double)dest.Height / scr.Height;
    var ratio = Math.Min(ratioX, ratioY);

    var newWidth = (int)(scr.Width * ratio);
    var newHeight = (int)(scr.Height * ratio);

    if (!centered)
        return new Rectangle(0, 0, newWidth, newHeight);
    else
        return new Rectangle((dest.Width - newWidth) / 2, 
                             (dest.Height - newHeight) / 2, newWidth, newHeight);
}

Its basic math is taken form this post .

Here is a test bed, centered and uncentered using different random values:

Random rnd = new Random();

int cols = rnd.Next(3) + 2;
int rows = rnd.Next(4) + 3;

int w = pan_dest.Width / cols;
int h = pan_dest.Height / rows;
using (Graphics G = pan_dest.CreateGraphics())
{
    G.Clear(Color.White);
    for (int c = 0; c < cols; c++)
        for (int r = 0; r < rows; r++)
        {
            Rectangle rDest = new Rectangle(c * w, r * h, w, h);
            Rectangle rSrc = new Rectangle(0, 0, rnd.Next(200) + 10, rnd.Next(200) + 10);
            Rectangle rResult = FitToBox(rSrc, rDest, checkBox1.Checked);
            Rectangle rDestPlaced = new Rectangle(c * w + (int)rResult.X, 
                                        r * h + rResult.Y, rResult.Width, rResult.Height);

            using (Pen pen2 = new Pen(Color.SlateGray, 4f))
                G.DrawRectangle(pen2, Rectangle.Round(rDest));
            G.DrawRectangle(Pens.Red, rDestPlaced);
            G.FillEllipse(Brushes.LightPink, rDestPlaced);
        }
}

You would then draw your images like this:

  G.DrawImage(someImageimg, rDestPlaced, rSrc, GraphicsUnit.Pixel);

This maximizes the image sizes , not the number of images you can fit on a page, as specified in your comment. For the latter you should look into something like 2-dimensional packing ..