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

[Jacques_Dumarest]

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

Jacques

[Taifun]

@Jacques_Dumarest

I did not found a way or an extension to "expand" image keeping aspect ratio

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
Taifun

[TIMAI2]

As a starting point you could try this:

The Porter-Duff Experiment

The Porter-Duff Experiment is NOT about a fictional progressive jazz/rock/fusion supergroup from the 1970's ( ), but relates to the compositing of digital images. You can read all about it HERE and some real world examples HERE This extension provides all the various transformations available with PorterDuff.Mode. For ALL of the transformations to work, your source and destination image files MUST have a transparent background (or at least a part of the image should be transparent). Plea…

see what happens.....

[Jacques_Dumarest]

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.

[Jacques_Dumarest]

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

[TIMAI2]

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).

[ABG]

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.

[TIMAI2]

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

[Jacques_Dumarest]

@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

[TIMAI2]

ViewUtil - component to image

[ABG]

The Canvas has a block to save to a file.

See if it will grab the sprites too.

Beware of lost resolution.

[TIMAI2]

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.

[Jacques_Dumarest]

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