Handling EXIF metadata Orientation property

[jordiup]

Firstly, thank you so much for this project. Love what you're doing ❤️‍🔥

I would like to describe some strange image rotation behaviour I've been encountering

I didn't want to make a feature request, rather report the behaviour, see if anyone else has encountered a fix

---

Feature Request

Description

Problem: If you load a JPEG with EXIF metadata specifying an image rotation (i.e.Orientation Rotate 90 CW) the image renders with unaltered Orientation

Request: Support for Orientation from EXIF metadata

Additional Context

• CSS3 currently has support with solid browser coverage for image-orientation: from-image. This leads to unexpected outcomes when using user-sourced profile images i.e. a User uploads a photo that is horizontal, but it is rotated in the og social card.
• Screenshot showing the discrepancy below

• Sample files
  
  

[shuding]

Yeah this is indeed a problem. I initially tried to add it but EXIF parsing seems to be complicated and I didn't find a good lib.

I'll make this a feature request and track it here!

[jordiup]

How I ended up solving this for my use case:

import ExifReader from 'exifreader';

//...

const exifTags = await ExifReader.load(imgUrl);
const orientationTag = exifTags?.['Orientation'];
console.log('Orientation:', orientationTag);

/**
Now based on orientationTag.value, we can rotate the image

The 8 EXIF orientation values are numbered 1 to 8.
1 = 0 degrees: the correct orientation, no adjustment is required.
2 = 0 degrees, mirrored: image has been flipped back-to-front.
3 = 180 degrees: image is upside down.
4 = 180 degrees, mirrored: image has been flipped back-to-front and is upside down.
5 = 90 degrees: image has been flipped back-to-front and is on its side.
6 = 90 degrees, mirrored: image is on its side.
7 = 270 degrees: image has been flipped back-to-front and is on its far side.
8 = 270 degrees, mirrored: image is on its far side.

Handle then non-mirrored cases and store the final rotation value in a variable encoded for css image rotate
*/
let rotationCssValue = '0deg';
switch (orientationTag?.value) {
	case 3:
		rotationCssValue = '180deg';
		break;
	case 4:
		rotationCssValue = '180deg';
		break;
	case 5:
		rotationCssValue = '90deg';
		break;
	case 6:
		rotationCssValue = '90deg';
		break;
	case 7:
		rotationCssValue = '270deg';
		break;
}