How to resize an image in sharp with the option 'contain' but preserve the aspect ratio of the original dimensions?

user_1031947 0
Viewed 15235

I have a 1000px by 750px image.

I use lovell/sharp to resize it:

await sharp(image)
    .resize({
        fit: sharp.fit.contain,
        width: 800,
        height: 800
    })
    .jpeg({ quality: 80 })
    .toBuffer()

This results in a new image that is 800px by 800px, with the original image 'contained' inside of that region.

What I would really like is to have a final image that is 800px by 600px. IOW, to resize the image and preserve the aspect ratio.

I realize it is possible to do this by specifying only a width. However it is useful to have a bounding box to contain the resized image in, to avoid creating images greater than a certain height.

Can I do this in sharp with different settings?

sharp node.js javascript
3 Answers

Keep either width or height so that the Sharp will maintain the ratio

Below the height will maintain its ratio when resizing;

await sharp(image)
    .resize({
        fit: sharp.fit.contain,
        width: 800
    })
    .jpeg({ quality: 80 })
    .toBuffer()
user_56869660

What I think you are willing to achieve:

await sharp(image)
    .resize(800, 800, {
        fit: 'inside',
    })
    .jpeg({ quality: 80 })
    .toBuffer()
user_145234670

Pass a string to the fit property.

    let resizedPhoto
    await sharp(photoBuffer)
      .resize({ width: 1200, height: 900, fit: 'fill' })
      .toBuffer()
      .then((data) => {
        resizedPhoto = data
      })
      .catch((err) => {})
user_105818020
Related