Transform images into a new aspect ratio without cropping but adding space

[javiergbas]

I want users to upload an image with any aspect ratio, then have a squared version ready to use, not cropping the original but adding space if needed.

I've tried with the crop options (https://filestack.github.io/filestack-js/interfaces/pickercropoptions.html) but it forces the user to select a square part of the image.

I've also tried with their processing api (https://www.filestack.com/docs/api/processing/#resize) but doesn't return a square version either.

This is a sumamry of what I need: https://i.stack.imgur.com/DHTUU.png

Thanks!

[pcholuj]

Hi @javiergbas , We have that feature in our plans for now i can post you workaround for this using watermark https://cdn.filestackcontent.com/AHvhedybhQMqZOqRvZquez/watermark=f:%22https://cdn.filestackcontent.com/resize=w:200/FXmPBqQ6QKmpAwktnpDd%22/https://dummyimage.com/200x200/ffffff/ffffff so you appling image as watermark to empty image with background

[javiergbas]

Thanks @pcholuj, this is very helpful! Could you please give some more details of the workaround?

I'm seeing 3 important parts here:

https://cdn.filestackcontent.com/AHvhedybhQMqZOqRvZquez/watermark=f:%22https://cdn.filestackcontent.com/resize=w:200/FXmPBqQ6QKmpAwktnpDd%22/https://dummyimage.com/200x200/ffffff/ffffff

1. AHvhedybhQMqZOqRvZquez what is this?
2. FXmPBqQ6QKmpAwktnpDd is the image handler of the logo I want to use, I can just replace it with my logo handler
3. https://dummyimage.com/200x200/ffffff/ffffff is for having a white image with the size we need, I can use this or a png on my server.

Thanks in advance!

[pcholuj]

hi

1. Its apikey, you should replace it with your own
2. correct
3. yup you can use your own image or upload it to filestack and use file handle

[javiergbas]

This is helpful, thanks 🙌