CODEWITHSUNDEEP
node.jsexpressvue.jsmulter
Alex Hunter
Alex Hunter

Reputation: 260

How to force to show image orientation?

I'm using multer node and express to upload a image to my app. But some images shows rotate 90 degrees when it's on the client.

why is this happening?, how can I fix it?

By the way I'm using vue on the client and for the upload process, of course I use formdata

UPDATE

After research and comments from the guys above, its a EXIF problem. Any code ideas to solve this?

Upvotes: 2

Views: 3259

Answers (2)

Radu Diță
Radu Diță

Reputation: 14171

This is most likely caused by Exif metadata (just like @Romulo suggested).

Browsers ignore Exif metadata when displaying images and that's why you're getting this behaviour.

To check that this is related to Exif take 4 pictures with different phone orientation (landscape left, landscape right, portrait, upside down). One of them will be shown properly, while the other 3 will be rotated. (Also note that if you're using the front camera, the image will also get mirrored).

Not all camera phones do this, but iOS does it consistently. The reason for this is performance. When rotation the phone the sensor also rotates and the picture taken doesn't take the rotation into consideration.

To properly show the photo, the image needs to be rotated, but if you just change the Exif metadata then you don't need to do it. Of course, any client that shows the image needs to be aware of this information (and iOS Photos and such are aware).

This has nothing to do with multer, but with the images are stored.

The bottom line is that you need to rotate the image to compensate for this.

Take a look over this npm package to adjust your image on the server side.

Upvotes: 2

Romulo
Romulo

Reputation: 5104

The behaviour you are experiencing is probably caused by the Exif Orientation metadata.

There is another question here on Stackoverflow about this problem: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

The selected answer points to a project called Javascript-Load-Image as a possible solution, that basically means you will have to take the orientation in consideration when rendering the images to get a consistent behaviour.

Another possible alternative would be to edit/remove the orientation metadata in your backend.

Check the following resource for more information:

JPEG Image Orientation and Exif

Upvotes: 3

Related Questions