HEIC-to-JPEG Images Lose Correct Orientation in DIT v8 Despite "rotate": null" and autoWebPParameter=Yes

[amcfarlane]

The Problem

iPhone-generated HEIC (which are manually converted to JPEG) images consistently lose their correct orientation when processed through DIT, even when using "rotate": null as recommended in the AWS documentation. The "rotate": null" fix does not trigger autoOrient(), resulting in sideways images. We have autoWebPParameter=Yes and would like to keep this enabled.

This may be related to #606 , although we are not using { "animated": true }.

To Reproduce

Use the following original image:
https://assets.phmuseum.com/broken-6.jpg

Then call these three transformations, all of them lose orientation in Chrome:

1. No edits

https://d1lr1cdljycroc.cloudfront.net/eyJidWNrZXQiOiJpbWFnZS10ZXN0cy5waG1zdWV1bS5jb20iLCJrZXkiOiJicm9rZW4tNi5qcGcifQ==

{"bucket":"image-tests.phmsueum.com","key":"broken-6.jpg"}

2. Empty edits object

https://d1lr1cdljycroc.cloudfront.net/eyJidWNrZXQiOiJpbWFnZS10ZXN0cy5waG1zdWV1bS5jb20iLCJrZXkiOiJicm9rZW4tNi5qcGciLCJlZGl0cyI6e319

{"bucket":"image-tests.phmsueum.com","key":"broken-6.jpg","edits":{}}

3. Documented fix: { "rotate": null }

https://d1lr1cdljycroc.cloudfront.net/eyJidWNrZXQiOiJpbWFnZS10ZXN0cy5waG1zdWV1bS5jb20iLCJrZXkiOiJicm9rZW4tNi5qcGciLCJlZGl0cyI6eyJyb3RhdGUiOm51bGx9fQ==

{"bucket":"image-tests.phmsueum.com","key":"broken-6.jpg","edits":{"rotate":null}}

Actual behavior:

None of the above preserve the correct orientation in Chrome.

Expected behaviour

According to AWS documentation (https://docs.aws.amazon.com/solutions/latest/dynamic-image-transformation-for-amazon-cloudfront/rotate-images-manually.html), using:

{"rotate": null}

Possible Workaround

We think this might be due to this code...

case "rotate": {
  if (edits.rotate === undefined) { // or === void 0 when deployed
    originalImage.autoOrient();
    
  } else if (edits.rotate !== null) {
    originalImage.rotate(edits.rotate);
  }
  break;
}

If rotate is null originalImage.autoOrient() is never called in this code. But we are not sure if its meant to be as the fix could be this part which will execute if edits.rotate === null. We are not image experts to know if they are both meant to run together.

if (edits && edits.rotate !== void 0 && edits.rotate === null) {
      image = (0, import_sharp.default)(originalImage, options);
    } else {
      await (0, import_sharp.default)(originalImage, options).metadata();
      image = (0, import_sharp.default)(originalImage, options).withMetadata();
    }

As a workaround we added the following:

case "ao": {
  originalImage.autoOrient();
  break;
}

This test works as expected. This has fix was also deployed to our website and performed an initial manual visual check to confirm it’s working, and it looks good.

https://d1lr1cdljycroc.cloudfront.net/eyJidWNrZXQiOiJpbWFnZS10ZXN0cy5waG1zdWV1bS5jb20iLCJrZXkiOiJicm9rZW4tNi5qcGciLCJlZGl0cyI6eyJyb3RhdGUiOm51bGwsICJhbyI6dHJ1ZX19

{"bucket":"image-tests.phmsueum.com","key":"broken-6.jpg","edits":{"rotate":null, "ao":true}}

Please complete the following information about the solution:

Version: v8.0.0
Region: eu-south-1