Problem that images taken with smartphones are oriented towards the future

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

Nowadays, high-quality photos can be easily taken with smartphones, and single-lens reflex cameras are becoming less popular.

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

I will share what to do when an incident occurs where the orientations are not aligned for some reason when such images are handled by the system.

There were no problems with handling the images!

There were some problems with image handling, but they were fine.

Since I was using FuelPHP's upload module

There is no problem when displaying an image by specifying the URL directly, but when it is loaded through an HTML tag, it is reversed...

Then there's the problem with the image itself! ?

There is no particular problem with images that are compatible with the development environment, but if you upload an image with this problem from your PC, it will still face in a strange direction.
This only happens with jpeg images taken with a smartphone.

Is that what you mean? I was wondering if the Exif information was causing the problem, so I checked to see if there was any such information in Exif.

If you want to check with PHP, use the exif_read_data function.

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

Then, it suddenly 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).. )

Exif information on smartphones is recorded in considerable detail, including image size, shooting date and time, GPS (if ON), shutter speed, F value, etc. This alone is quite extensive.

I feel like there is too much information, but I found the data I was looking for...!

That is the "Orientation" part.

 

Correct image rotation based on orientation information

When I was looking for detailed information regarding Exif information for images, I found
a document from the Japan Electronics and Information Technology Industries Association Although it is extremely detailed, it also tests the reader's reading comprehension skills.
All you have to do is code based on the image direction term.

Do you understand?

So, I made a list.

I've never come across an image that would be reversed, but from what I've read in the materials, it seems like it would be done.
Numbers 1, 3, 6, and 8 often appear. Looking at the images I have, it seems that 3 is often set for landscapes, and 6 is often set for portraits.
3 means a 180 degree rotation, so even though the photo was taken horizontally (because it's a landscape shot), the smartphone recognizes that the photo was taken upside down.
(On an iPhone, the left and right HOME buttons are reversed.)
Also, 6 means a 90 degree rotation, and the image orientation is portrait, so you can see that the smartphone was held vertically to take the photo. Once you understand this, all you need to do is rotate the image according to the Exif information and save it. Rotate and flip can be easily done using
FuelPHP's Image class However, to rewrite Exif information, PEL is required. If you don't need Exif information, it may be a good idea to simply rotate it based on the Orientation information and overwrite it. Please note that if you only perform rotation processing and leave the Exif information unedited, you will not be able to collect it.
That's it.