如何避免在Angle 4应用中旋转图像

Question

I have an angular application that allows you to choose a profile picture. Performing tests I noticed that when I take images from an iPhone in portrait mode and upload the image to my app it is shown rotated, however if I take the photo in landscape mode the image shows correctly. Additionally, perform this same test on an android device, and the result is that both in portrait mode or landscape mode the image shows correctly. My question is how to avoid this behavior since I want the images to always be displayed without rotations. Below is an example of the problem mentioned:

All images uploaded should be displayed this way:

I check the files uploaded from ios physically on the server and none of them are rotated. The problem seems to be the visualization from the app.

What should I do so that the images are always displayed without rotation from my angular application?

I have done a stackblitz to show the implementation made for this component

stackblitz

I appreciate that someone can help me, and explain to me why this strange behavior is due.

Many Thanks!

Answer 1

The problem here is with something called EXIF data. This is an extra set of metadata captured with the image which has location, time, apereture but also orientation .

If you want to display the image correctly after uploading it to the server, you could simply rotate the image based on the exif orientation, and then strip the exif data. This way, the image is always displayed "correctly", both in browsers that understand EXIF and browsers that don't. This is explained here: Fix iOS picture orientation after upload PHP

If you want to display the image correctly before uploading (eg preview), your best bet is using a HTML canvas and then rotating the image based on it's orientation. Please see this topic for more information: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images