2

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?

Alex Hunter
  • 242
  • 3
  • 18
  • https://stackoverflow.com/questions/37317718/how-can-i-get-my-express-app-to-respect-the-orientation-exif-data-on-upload – Robus Mar 31 '20 at 10:36

3 Answers3

2

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

Romulo
  • 4,323
  • 2
  • 17
  • 25
  • hi @Romulo i see, but this happen to all people that use this multer library? or its just me?, because every tutorial that i saw not say anything about exif orientation – Alex Hunter Mar 31 '20 at 12:57
  • I would say it has nothing to do with Multer at all. It's more related to your image files than anything. Get an image metadata tool and inspect the orientation metadata of the images that are being rendered rotated. – Romulo Mar 31 '20 at 13:55
  • ok, but its annoying, because i dont see anyone complaining about this in every youtube tutorial that i saw – Alex Hunter Mar 31 '20 at 15:32
2

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.

Radu Diță
  • 8,910
  • 1
  • 18
  • 27
  • i was searching too about this, and we all are agree that this is a problem with EXIF. Do you any simple code to do this? – Alex Hunter Apr 02 '20 at 10:57
0

You can use https://github.com/blueimp/JavaScript-Load-Image. It uses canvas.

Demo: http://blueimp.github.io/JavaScript-Load-Image/

Honbra
  • 21
  • 3