Why did CopyRect Flipped the second image in delphi 10.3?

Question

I want to take a screenshot of my page and put the result into a bitmap, Because there is a scrollbar on the page, i have to take several screenshots, and i want to merge those bitmaps.

if have used this code to make a screenshot and save it: Take a screenshot of a particular area in Delphi 7

i used the code to merge them from this page http://www.delphigroups.info/2/8/309463.html

if i copied it directly it would result in the first image being used, and i white rectangle for the second. so i tried to change it a little bit, and now i'm getting both images in one file.

This is the code i use to concatenate the bitmaps:

    function ConcatenateBitmaps(const MainBitmap: TBitmap; const BitmapToAdd: 
    TBitmap): TBitmap;
    begin
      Result := MainBitmap;

      If BitmapToAdd.Width > MainBitmap.Width then
        Result.Width := BitmapToAdd.Width;

      Result.Height := MainBitmap.Height + MainBitmap.Height;
      Result.Canvas.CopyRect(
        Rect(0,MainBitmap.Height,BitmapToAdd.Width,BitmapToAdd.Height),
        BitmapToAdd.Canvas,
        Rect(0,0,BitmapToAdd.Width,BitmapToAdd.Height)
      );
    end;

The problem is that te second image is being flipped, vertical and horizontal;

What am i doing wrong here?

EDIT: An example of the result, the first image is good, the second image is flipped:

as i see now, my description was wrong, it's horizontaly mirrored, and verticaly flipped

Answer 1

Cause and quickfix:

The problem is in this part:

Rect(0,MainBitmap.Height,BitmapToAdd.Width,BitmapToAdd.Height)

You make a rectangle of which the top is the total height of the resulting image, and the bottom is the height of the bitmap to add. So this rectangle is basically inverted (its bottom is above its top).

And it's likely deformed as well, since the height of this rectangle is not the height of the bitmap to add.

The quickfix would be:

Rect(0,Result.Height- BitmapToAdd.Height,BitmapToAdd.Width,Result.Height)

Other issues and confusion:

But I think the cause of your confusion is because you think that Result and MainBitmap are two different bitmaps, while actually they are both references to the same bitmap. The assignment you do in the beginning just copies the reference, not the actual TBitmap object.

In addition, you mix up 'height' and 'bottom'. TRect expects you to set top and bottom coordinates, not top and height. This, together with the previous issue, causes not only that the bitmap is upside down, but also that it will be stretched, and partially covering the previous images. The more images you add, the more clear that effect will be.

Personally I think it's way more efficient to modify the existing bitmap in this scenario, mainly because you would otherwise have to clean up your old bitmap all the time, plus that you have a function that magically creates bitmaps. You get the question of ownership of the bitmap objects, and with that, the risk of memory leaks, which is not good, especially when dealing with large bitmaps.

My suggested version:

So, I would just make it a procedure, where the first bitmap is modified by adding the second bitmap to it.

In the version below, I also used Canvas.ClipRect, which is for a bitmap essentially the bounding rectangle of the bitmap. And then I used OffsetRect to 'move' this rectangle(increasing its top Y and bottom Y).

By doing this in a separate variable, you can have a relatively clean version compared to the quick fix I presented above, because you can use the dimensions of MainBitmap before actually modifying it.

procedure AppendBitmap(const MainBitmap: TBitmap; const BitmapToAdd:
TBitmap);
var
  TargetRect: TRect;
begin
  // Widen the main bitmap if needed
  if BitmapToAdd.Width > MainBitmap.Width then
    MainBitmap.Width := BitmapToAdd.Width;

  // Set TargetRect to the right size
  TargetRect := BitmapToAdd.Canvas.ClipRect;
  // And then to the right position
  OffsetRect(TargetRect, 0, MainBitmap.Height);

  // Make room for the bitmap to add
  MainBitmap.Height := MainBitmap.Height + BitmapToAdd.Height;

  // Draw it in the created space
  MainBitmap.Canvas.CopyRect(
    TargetRect,
    BitmapToAdd.Canvas,
    BitmapToAdd.Canvas.ClipRect
  );
end;

And if you like, you can make a wrapper function with the signature of the original, that creates a copy of the main image and returns that. Note though, that MainBitmap and the result of this function are no longer the same bitmap, and you have to make sure to properly free both of them when you're done.

function ConcatenateBitmaps(const MainBitmap: TBitmap; const BitmapToAdd:
TBitmap): TBitmap;
begin
  Result := TBitmap.Create;
  Result.Assign(MainBitmap);
  AppendBitmap(Result, BitmapToAdd);
end;

PS: I like questions like this from which I learn something. I never realized you could flip an image by flipping the rect passed to CopyRect. :D