/fit-in not working with 4.0.0

Using /fit-in/AxB/ is cropping images rather than fitting them within the dimensions specified.

Example: https://i1rk6c9qi5.execute-api.us-east-1.amazonaws.com/image/100x100/bart.png

A workaround to fit an image into the resize area is to use the upscale filter:

https://i1rk6c9qi5.execute-api.us-east-1.amazonaws.com/image/200x50/filters:upscale()/bart.png

The fix for this might be in the process(event) function:

https://github.com/awslabs/serverless-image-handler/blob/a1b3eb659807599eaec88fb8df21bc34a45b93ee/source/image-handler/thumbor-mapping.js#L27-L38

… the this.edits.resize.fit = 'inside' needs to be set, the same as what happens in the upscale() filter.

[beomseoklee]

We have updated our solution, and I believe your issue has been fixed. If you still see the issue with the latest version (v4.2), please feel free to reopen the issue.

You can refer to the recent changes here

[mandys]

Hi @tjw0051 we faced a similar issue. fit-in from thumbor isn’t translated here correctly.

That’s because they aren’t passing anything to resize. While ‘inside’ is the right way forward ( because it preserves aspect ratio ) for us this leads to another issue. For eg: if we pass 500x500 as the size, we want image to be resized based on aspect ratio but we should be able to ‘fill’ the remaining area with color of our choice.

This is how we did in thumbor:

https://<our_cf_url>/fit-in/500x500/filters:quality(90):fill(fff)/my_source.jpg

If we use ‘inside’, we get back an image with aspect ratio maintained, but we aren’t able to fill it with white color so as to get back 500x500 final product.

options.background can only be used with ‘contain’. https://sharp.pixelplumbing.com/en/stable/api-resize/

So, if this was instead using

this.edits.resize.fit = ‘contain’,

we could pass

sharp(input) .resize(200, 300, { kernel: sharp.kernel.nearest, fit: ‘contain’, position: ‘right top’, background: { r: 255, g: 255, b: 255, alpha: 0.5 } }) .toFile(‘output.png’) .then(() => { // output.png is a 200 pixels wide and 300 pixels high image // containing a nearest-neighbour scaled version // contained within the north-east corner of a semi-transparent white canvas });