/fit-in not working with 4.0.0

[tjw0051]

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.

[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
});

[rpong]

This is what we did to make /fit-in/ work: #130

Also includes fixes to make fetching from S3 sub directories work.

Although this pasts the unit-test, this is what works with our use cases, use at your own risk.

[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

[giovannipds]

@beomseoklee @georgebearden hi! I've updated the function on a project and noticed this change. Is there a way to update the urls to use the old fit behavior as cover or should I update the code Lamba's using? Thanks in advance!

[giovannipds]

If anyone else wants the same I did, apparently it's possible to do that changing the line 59 of thumbor-mapping.js to fit cover.