Proportionally Resize an Image: Creating Thumbnail Graphics

In graphics "programming" a thumbnail is a reduced-size version of a picture.

Here's an idea for your next application: create a "form picker" to let users easily select and navigate through open forms by displaying thumbnails of them all in a dialog window.

Interesting idea? Sounds like the "Quick Tabs" feature of the IE 7 browser :)

Before actually creating such a neat feature for your next Delphi application, you need to know how to grab the image of the form ("form-screen shot") and how to proportionally resize it to the desired thumbnail image.

Proportional Picture Resizing: Creating Thumbnail Graphics

Below you will find a block of code to take the image of a form (Form1) by using the GetFormImage method. The resulting TBitmap is then resized to fit the maximum thumbnail width (200 pixels) and/or height (150 pixels).
Resizing maintains the aspect ratio of the image.

The resulting image is then displayed in a TImage control, named "Image1".

 const
  maxWidth = 200;
  maxHeight = 150;
var
  thumbnail : TBitmap;
  thumbRect : TRect;
begin
  thumbnail := Form1.GetFormImage;
  try
    thumbRect.Left := 0;
    thumbRect.Top := 0;
    //proportional resize
    if thumbnail.Width > thumbnail.Height then
    begin
      thumbRect.Right := maxWidth;
      thumbRect.Bottom := (maxWidth * thumbnail.Height) div thumbnail.Width;
    end
    else
    begin
      thumbRect.Bottom := maxHeight;
      thumbRect.Right := (maxHeight * thumbnail.Width) div thumbnail.Height;
    end;
    thumbnail.Canvas.StretchDraw(thumbRect, thumbnail) ;
//resize image
    thumbnail.Width := thumbRect.Right;
    thumbnail.Height := thumbRect.Bottom;
    //display in a TImage control
    Image1.Picture.Assign(thumbnail) ;
  finally
    thumbnail.Free;
  end;
end;

Note: The GetFormImage only copies the form client area - if you need to take the entire "screen shot" of a form (including its border) you'll need a different approach ...more about it next time.