Padding (adding a border, extending,...) an image

I need to blend to images with different size and I want to keep aspect ratio of both images. One way is to crop the largest image, but I want to keep the full content of both images, so I need to "extend" (or pad, or add a border: I do not know what is the proper word) the smallest image, adding extra pixel around the image. Ideally, I would like to work on png files, and add pure transparent pixels around the image.
I plan to use Taifun image extension for blending: using overlay block, and the is a crop block, but after digging in the blog, I did not found a way or an extension to "expand" image keeping aspect ratio

Are you aware of a solution for this problem?

Thank you vey much


I'm sorry, I'm not aware of a solution or workaround
also I'm not sure how this could be added as feature into the image extension

As a starting point you could try this:

see what happens.....

Hi Tim,

Thanks for the link to the Porter-Duff Experiment. Howerver, this tool combines images with the SAME resolution: "Please note that the source and destination images need to have the same dimensions for an accurate transformation"
I am looking for a way to add border to an image. For example, I have a square image, that I want to blend with a 4:3 landscape image aspect ratio, what I need is to add extra transparent pixels on left and right of my square imare image to get a 4:3 image, and then blend them together keeping aspct ratio of both image. The missing block is to add these extra pixels: expand / pad the square image.

What I am looking for is something like Open CV functionality: copyMakeBorder(); See the python implementation: Python OpenCV | cv2.copyMakeBorder() method - GeeksforGeeks

The only way I know would be to send out the image to a server running Imagemagick which could carry out the transformation you require (with the required parameters).

You can show one image in front of another image if you nest Arrangements, one inside the other, padded with other Arrangements.
Use one image for the background of the inner Arrangement, the other for the background of the outer Arrangement.

nested_images.aia (14.7 KB)

You could try overlapping Sprites on a Canvas, stacked by Z axis, also.

I'm thinking, get the dimensions/aspect of the larger image to size an arrangement. Place the image to be bordered with padding inside an arrangement surrounded by empty arrangements, have buttons to size these to get the correct layout, then use the component to image extension to make an image. Then use porterDuff extension to overlay. After a little test porterduff will work with images of different dimensions, but my extensions does not provide for sizing/positioning.

Alternatively as @ABG suggests if you do not need any blending

@TIMAI2 I see how you propose to place the image inside the larger arrangement to create the correct layout and display it, what I don't understand is how you save the expanded / padded image.
I need to be able to save the result image as a png file with tranparent added "border", and I face the same pb with @ABG proposal, looks OK for display, but how to save the result?
Thank you very much for your help

ViewUtil - component to image

The Canvas has a block to save to a file.

See if it will grab the sprites too.

Beware of lost resolution.

Try this

twoImgCanvas.aia (200.0 KB)

The canvas and background image are 4:3 aspect. The smaller image is square. You can drag the smaller image around to place it where required. The image is saved to the ASD, in the aia the path for the companion is hard coded.

Thanks for this aia sample.

I have now a test application that can add transparent border to the original image. In my est program, the original is square, and the result image has screen aspect ratio with transparent border. Here it is, as it may help other developpers.
TestExpandImage.aia (189.8 KB)
Thanks to Tim and Taifun. I now have a solution :slight_smile:

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.