Problem that images taken with smartphones are oriented towards the future

Hello.
I'm Mandai, in charge of Wild on the development team.

Nowadays, we live in an age where high-quality photos can be easily taken with smartphones, and it seems that the use of SLR cameras has decreased dramatically

It has become commonplace to easily take photos of children and store them in the cloud

We will share how to deal with the situation when such images are handled by a system and for some reason the orientation is not aligned

There was no problem with the image handling!

As for whether there were any problems with the handling of images, there were no problems there

Since I was using the FuelPHP upload module

There's no problem when you display an image by directly specifying the URL, but when you load it through an HTML tag, it gets inverted..

So, is it a problem with the image itself?

There are no particular problems with images in the development environment, but when I upload images that exhibit this issue from my PC, they still face the wrong direction.
This only happens with JPEG images taken with a smartphone.

So, is that it? I wondered if the Exif information was causing the problem, so I checked to see if there was any information of that kind in the Exif

To check using PHP, use the exif_read_data function

$exif = exif_read_data('/path/to/hogehoge.jpg');

Then, a whole row of them came out

 array ( 'FileName' => 'hogehoge.jpg', 'FileDateTime' => 1478746964, 'FileSize' => 1510220, 'FileType' => 2, 'MimeType' => 'image/jpeg', 'SectionsFound' => 'ANY_TAG, IFD0, THUMBNAIL, EXIF, GPS', 'COMPUTED' => array ( 'html' => 'width="2592" height="1936"', 'Height' => 1936, 'Width' => 2592, 'IsColor' => 1, 'ByteOrderMotorola' => 1, 'ApertureFNumber' => 'f/2.4', 'Thumbnail.FileType' => 2, 'Thumbnail.MimeType' => 'image/jpeg', ), 'Make' => 'Apple', 'Model' => 'iPad mini 2', 'Orientation' => 6, 'XResolution' => '72/1', 'YResolution' => '72/1', 'ResolutionUnit' => 2, 'Software' => '9.3.2', 'DateTime' => '2016:10:10 15:52:37', 'YCbCrPositioning' => 1, 'Exif_IFD_Pointer' => 206, 'GPS_IFD_Pointer' => 1030, 'THUMBNAIL' => array ( 'Compression' => 6, 'XResolution' => '72/1', 'YResolution' => '72/1', 'ResolutionUnit' => 2, 'JPEGInterchangeFormat' => 1434, 'JPEGInterchangeFormatLength' => 9014, ), 'ExposureTime' => '1/1506', 'FNumber' => '12/5', 'ExposureProgram' => 2, 'ISOSpeedRatings' => 32, 'ExifVersion' => '0221', 'DateTimeOriginal' => '2016:10:10 15:52:37', 'DateTimeDigitized' => '2016:10:10 15:52:37', 'ComponentsConfiguration' => '^A^B^C' . "\0" . '', 'ShutterSpeedValue' => '12045/1141', 'ApertureValue' => '4845/1918', 'BrightnessValue' => '14471/1420', 'ExposureBiasValue' => '0/1', 'MeteringMode' => 5, 'Flash' => 32, 'FocalLength' => '33/10', 'SubjectLocation' => ...(omitted)... )

The Exif information recorded on smartphones is quite detailed, including image size, shooting date and time, GPS (if ON), shutter speed, F-stop, and so on

It seems like there is too much information, but the data I'm looking for is among it!

That's the "Orientation" part

 

Correct image rotation based on orientation information

While searching for more information on image Exif information, I came across
a document from the Japan Electronics and Information Technology Industries Association While it contains extremely detailed information, it also tests the reader's comprehension.
All you need to do is code based on the image orientation section.

Do you understand?

So, I made a list

I've never encountered an image that needs to be flipped, but from what I've read in the documentation, it seems that this is the case. The
most common settings are 1, 3, 6, and 8. Looking at the images I have, it seems that 3 is often set for landscape orientation and 6 for portrait orientation.
3 means a 180-degree rotation, meaning the image was taken sideways (since it's landscape orientation), but the smartphone perceives it as upside down.
(On an iPhone, this is like the HOME button being reversed.)
6 means a 90-degree rotation, and the image orientation is portrait, suggesting the smartphone was held vertically. Once you've figured this out, all you need to do is rotate the image according to the Exif information and save it. Rotation and flipping are easily handled with
the FuelPHP Image class However, rewriting Exif PEL . If you don't need the Exif information, simply rotating the image based on the Orientation information and overwriting it seems fine. If you only rotate the image and leave the Exif information unedited, it will become impossible to collect the data, so be careful
.