Image Resizing in C11.1

questions
1

What is the best method to automatically resize an image. In my app I have a photo log and not every photo is the same size. I want the photo’s width and height to auto size in perspective to the image uploaded.

2

If you wish to resize the persisted Image
then I use www.ClarionFreeImage.com

If you wish to resize an image control to maintain the aspect ratio of the image
then something like this
(Note: I just wrote this here, so my apologies for any bugs)

   HIDE(?Image)
    ?Image{PROP:NoWidth}  = TRUE
    ?Image{PROP:NoHeight} = TRUE
    ?Image{PROP:Text}     = NewImageFileName
    IF ?Image{PROP:Height} = 0
        MESSAGE('Bad Image ['& NewImageFileName &']')
   ELSE
      AspectRatio = ?Image{PROP:Width} / ?Image{PROP:Height}
     
      IF AspectRatio > 1  ! Width > Height
         ?Image{PROP:Width}  = MaxImageSize
         ?Image{PROP:Height} = MaxImageSize / AspectRatio
      ELSE
         ?Image{PROP:Width}  = MaxImageSize * AspectRatio
         ?Image{PROP:Height} = MaxImageSize
      END 
  END 
  UNHIDE(?Image)
1 Like
3

Mark,

Thanks for the reply, I was not able to get your image control to work. Here is what I have currently setup:

Local Objects - ABC Objects - Window Manager - Reset PROCEDURE(BYTE Force=0,)VIRTUAL
CODE - SOURCE

IF NOT TARGET{PROP:AcceptAll}
?Image3{PROP:NoWidth} = TRUE
?Image3{PROP:NoHeight} = TRUE
?Image3{PROP:Text} = PHT:PictureFile
DO DisplayImage
PhotoChanged = TRUE
END

The DisplayImage Routine is as follows:

!!Display photo maintaining aspect ratio
DisplayImage ROUTINE
IF ?Image3{PROP:Height} > 239
AspectRatio$ = ?Image10{PROP:Width}/?Image10{PROP:Height}
?Image3{PROP:Height} = 239 !* AspectRatio$
?Image3{PROP:Width} = 405 * AspectRatio$
END

While it works some what, it does not provide a true aspect ratio for larger files.

4

So what I did which worked for Leonid’s TXText control wrapper, Lee’s AFE and Larry’s Free Image, was I had a panel on the right of a list box which displayed thumbnails of the document for the corresponding highlighted record in the list box, as one highlighted records could have one or more thumbnails this was why I had a panel on the right running from top to bottom.

The Thumbnail could not exceed a maximum width and/or maximum height and all documents, faxes and images were scaled up or down to meet one of the thumb nail dimensions. The documents, faxes and images could be portrait or landscape but this is why when scaled they couldnt exceed one of the thumbnail dimensions, which ever came first. It was rare to have a document, fax or image which perfectly met the max dimensions of the thumbnail.

But by scaling up or down the image and saving it to a thumbnail you then reduce network traffic or latency if data is stored on the same machine.

User’s couldnt tell they were looking at a thumbnail file and when they wanted to enlarge the thumbnail, they typically went into the form which displayed the document, fax or image at best fit width as its easier to scroll up or down in a maximised form window.

FreeImage does resizing for you
Clarion FreeImage Project

Common image manipulations

Provides basic image manipulation routines such as rotation, resizing, flipping or color adjustments, as well as lossless JPEG transformations.

This might also work if you are looking for a Clarion solution.
javascript - How to resize images proportionally / keeping the aspect ratio? - Stack Overflow

5

you mixed ?Image3 and ?Image10
which is why the AspectRatio wasn’t corrected

6

An alternative to PROP:s

GetPosition(?Image3, , ,Wd, Ht)
SetPosition(?Image3, , ,NewWd, NewHt)

IIRC these do not work well with resizing templates that use Prop: DeferMove

E.g. Mark’s code:

ImWd LONG
ImHt LONG
AspectRatio REAL 
  
   HIDE(?Image)
   ?Image{PROP:NoWidth}  = TRUE
   ?Image{PROP:NoHeight} = TRUE
   ?Image{PROP:Text}     = NewImageFileName
   GETPOSITION(?Image,,,ImWd,ImHt)
   IF ImHt <=0 THEN              ! was ?Image{PROP:Height} = 0
      MESSAGE('Bad Image ['& NewImageFileName &']')
   ELSE
      AspectRatio = ImWd / ImHt  ! was ?Image{PROP:Width} / ?Image{PROP:Height}
     
      IF AspectRatio > 1         ! Width > Height
         ImWd = MaxImageSize
         ImHt = MaxImageSize / AspectRatio
      ELSE
         ImWd = MaxImageSize * AspectRatio
         ImHt = MaxImageSize
      END
      SETPOSITION(?Image,,,ImWd,ImHt)
  END 
  UNHIDE(?Image)
1 Like