The problem of images taken with a smartphone pointing in the opposite direction

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

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

FuelPHP's upload moduleSince I was using

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?

Images used in the development environment work without any problems, but when images exhibiting the phenomenon are uploaded from a PC, they are still displayed in 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 detailed information about image Exif data,a document from the Japan Electronics and Information Technology Industries Association (JEITA)I found
It's incredibly detailed, but also quite challenging to understand.
It seems all I need to do is code based on the section on image orientation.

Do you understand?

So, I made a list

I haven't encountered any images that are flipped, but from what I've read in the documentation, that seems to be the case. The
most common values ​​seem to be 1, 3, 6, and 8. Looking at the images I have on hand, it seems that 3 is often set for landscape orientations, and 6 for portrait orientations.
3 means a 180-degree rotation, so even though the photo was taken with the phone held horizontally (landscape orientation), the smartphone perceives it as being upside down.
(On an iPhone, this would mean the left and right sides of the HOME button are reversed.)
6 means a 90-degree rotation, and since the image orientation is portrait, it suggests that the photo was taken with the smartphone held vertically. Once you understand this, all that's left is to rotate the image according to the Exif information and save it. Rotation and flippingthe Image class in FuelPHPcan be easily handled with
However, rewriting the Exifthe PELlibrary. If you don't need the Exif information, you can simply rotate it based on the Orientation information and overwrite it. If you only rotate the image and leave the Exif information untouched, it will become unmanageable, so please be careful.
That's all.