Sharp image library rotates image when resizing?

Question

When using the sharp image resize library https://github.com/lovell/sharp for node.js, the image is being rotated.

I have no code thats says .rotate(), so why is it being rotated and how can I stop it from rotating?

I'm using the serverless-image-resizing example provided by AWS: https://github.com/awslabs/serverless-image-resizing that uses lambda to resize images on the fly if the thumbnail does not exist

S3.getObject({Bucket: BUCKET, Key: originalKey}).promise()
.then(data => Sharp(data.Body)
      .resize(width, height)
      .toFormat('png')
      .toBuffer()
    )
.then(buffer => S3.putObject({
        Body: buffer,
        Bucket: BUCKET,
        ContentType: 'image/png',
        Key: key,
      }).promise()
    )
.then(() => callback(null, {
        statusCode: '301',
        headers: {'location': `${URL}/${key}`},
        body: '',
      })
    )
.catch(err => callback(err))

Original large image:

Resized image: note it has been rotated as well:

score 102 · Accepted Answer · answered Feb 10 '18 at 22:31

102

The problem actually turned out to be this: when you resize an image, the exif data is lost. The exif data includes the correct orientation of the image, ie which way is up.

Fortunately sharp does have a feature that does retain the exif data, .withMetadata(). So the code above needs to be changed to read:

S3.getObject({Bucket: BUCKET, Key: originalKey}).promise()
.then(data => Sharp(data.Body)
      .resize(width, height)
      .withMetadata() // add this line here
      .toBuffer()
    )

(Note that you also need to remove the .toFormat('png') call because png does not have the same support for exif that jpeg does)

And now it works properly, and the resized image is the correct way up.

answered Feb 10 '18 at 22:31

JK.

21,477
35
135
214

I have a unrelated question, but I cannot find any information. I would like to rotate an image of a specific angle (not multiple of 90). I understand libvips does provide that, which is probably the reason does not. Any suggestions to accomplish that (even if it is in pure js) ? – Jeremy Chone Jun 01 '18 at 17:29
8

You could also use [`rotate()`](http://sharp.pixelplumbing.com/en/stable/api-operation/#rotate): 'If no angle is provided, it is determined from the EXIF data. Mirroring is supported and may infer the use of a flip operation.' – James T Jun 08 '18 at 10:08
4

Am I the only one who think this kind of details should be default... – U.Savas Apr 26 '21 at 17:28
3

I would recommend the rotate() solution over this, since EXIF data can contain potentially private information about the original photograph. If your only goal is to fix rotation, you don't need to leak all this private data by forwarding all of it into the resized version. – Zero Trick Pony Feb 21 '22 at 00:26

score 88 · Answer 2 · answered Nov 13 '19 at 00:07

88

The alternative solution is to actually call .rotate() before resize. This will auto-orient the image based on the EXIF data.

.then(data => Sharp(data.Body)
      .rotate()
      .resize(width, height)
      .toBuffer()
    )

More details in the docs.

This way you don't need to retain the original metadata, keeping the overall image size smaller.

answered Nov 13 '19 at 00:07

mihai

37,072
9
60
86

1

This works very well thank you!! I didn't see that in the documentation before so I was using another library to rotate before resizing with Sharp. – Carlino Gonzalez Jan 21 '20 at 16:11
1

Great! This works perfectly! I think this `rotate` could be called internally by sharp to fix rotation, but It's fine. – Thiago Silva Ferreira Jul 01 '20 at 19:55
This worked perfectly! Thanks for this tip as it allows to keep stripping the metadata – derbenoo Jan 26 '21 at 10:58
1

Using `rotate` allows to keep `toFormat("png")` in place. – Tomasz Czechowski Aug 17 '21 at 14:44
1

For some reason, if I use `withMetadata()` approach and try to resize the width only, it resized the height instead of the width to the specified value. But this approach works perfectly. – Lahiru Chandima Sep 12 '21 at 13:56
1

This approach seems to produce an accurate width and height, unlike the withMetadata() approach. – Andrew Clark Jul 26 '22 at 04:22
Cảm ơn bác, code chạy ầm ầm. – Hieudien Aug 23 '22 at 03:02
2

The order is important. I found `resize(...).rotate()` works, while `rotate().resize(...)` does not work for some images. – Anton Ivinskyi Dec 03 '22 at 22:05
@AntonIvinskyi According to the docs, the correct one is rotate().resize(...). https://sharp.pixelplumbing.com/api-operation#rotate – ingdc Aug 15 '23 at 07:47

score 2 · Answer 3 · answered Dec 06 '20 at 16:17

 const data = await sharp(file_local)
    .resize({
      width: px,
     
  })
    .jpeg({
      quality: quality,
      progressive: true,
      chromaSubsampling: "4:4:4",
    })
    .withMetadata()
    .toFile(file_local_thumb);

Using the (.withMetadata()), to prevent rotation of image.

Aditional you can pass the width only parameter, you dont need the height.

score 1 · Answer 4 · answered Apr 03 '21 at 22:49

I fixed this in a related way, specific to the AWS Serverless Image Handler, without changing code. I'm passing in "rotate":null in the list of edits.

In reading the latest (5.2.0) code it looks like they tried to fix this, but it still wasn't working for me until I added "rotate":null

Here is a related issue on Github: https://github.com/awslabs/serverless-image-handler/issues/236

score 0 · Answer 5 · answered Oct 26 '20 at 12:25

Updated answer for Serverless Image Handler 5.0, deploying with the CloudFormation Stack template as of 10/2020:

I appended .rotate() to line 50 of image-handler.js and it worked like a charm:

const image = sharp(originalImage, { failOnError: false }).rotate();

score 0 · Answer 6 · answered May 06 '22 at 14:16

In case you landed here using the Nuxt Image component with IPX provider, this is how I solved it: in the nuxt.config.js file, add this:

  buildModules: [
    [
      '@nuxt/image',
      {
        sharp: {
          withMetadata: true,
        },
      },
    ],
  ],

Note there are more options in the module than the ones that are documented: https://github.com/nuxt/image/blob/61bcb90f0403df804506ccbecebfe13605ae56b4/src/module.ts#L20

Sharp image library rotates image when resizing?

6 Answers6

Linked