webtrees
webtrees copied to clipboard
fisharebest
2.0.19-When uploading photos from phone camera, the display is rotated.
When I use the mobile browser to create new multimedia, click Choose File, and take photos with the camera, the thumbnail displayed after uploading is rotated (90 degrees counterclockwise). The original file stored in the media folder is normal. Only all thumbnails are rotated.
How to fix it?
https://github.com/Intervention/image/issues/461 https://github.com/Intervention/image/issues/392 https://github.com/Intervention/image/issues/906 Is this the cause of the error?
How to fix it?
What exactly is broken.
- webtrees rotates the image - but it should not be rotated
- webtrees does not rotate the image - but it should be rotated
Does your server have the PHP exif library installed?
Control panel -> Server information ->
Yes,exif is enable. When I upload a file, I choose the android phone camera to shoot vertically, and after uploading, all the thumbnails are displayed and rotated 90° counterclockwise.
For thumbnails, we must rotate the image ourselves. (Using the EXIF data).
For original images, the browser will rotate the image. (Also using EXIF data).
If the thumbnail image is not rotated, then the there is a problem with the image library on your server.
The code is here.
https://github.com/fisharebest/webtrees/blob/2.0.19/app/Factories/ImageFactory.php#L374-L383
Perhaps replace return $image; with throw $ex;.
If there is an error, perhaps you will see it.
I tried this method without getting any errors. Preview images and thumbnails are still incorrectly rotated.
I shot with the phone's camera facing in portrait mode
It is now incorrectly rotated to the image below
Can you provide the original image
Attached is the original image in the media folder on the server. 16466539500334113853255912621296.zip
Below is my exif detection data in http://code.ciaoca.com/javascript/exif-js/demo/upfile
Orientation: 6.
This means that the right edge of the photo is the "top". So, the image must be rotated -90 degrees.
The image library in webtrees is doing exactly this.
I think the code is working correctly.
Your image contains the wrong EXIF data for orientation.
My device is Samsung S21, the latest last year.
It shouldn't be a problem with my device, I have also tested on other devices, including other Android tablets, on Nokia phones.
I have the same problem on ipad ios 12.5.
As shown in the figure below, for correct display on the screen.
Orientation is 6, should it be rotated 90° clockwise?
However the code doesn't do that.
You are correct. The image should be rotated - but it is not rotated.
This is a bug in the intervention/image library.
https://github.com/Intervention/image/issues/745
See also https://github.com/fisharebest/webtrees/issues/3553
It was reported as fixed.
I've spent a lot of time debugging this issue, this is simply too hard for my non-developer. Hard work pays off, I think I've figured out where the problem is. Images in webtrees:
- If you use the gd engine, the exif data will be lost.
- If you use Imagick engine, exif will be reserved.
Why was it obtained by mistake? Because in Intervention/image the following statement is used to get the value of
Orientation.
https://github.com/Intervention/image/blob/b734a4988b2148e7d10364b0609978a88d277536/src/Intervention/Image/Commands/ExifCommand.php#L44
But in Webtrees, images have two Orientation values. One is 0 and the other is the real value. As shown below.
The real value is in the subarray THUMBNAIL. Therefore, according to the statement in Intervention/image, only the wrong Orientation value can be obtained.
If this is an issue in Intervention/image, hopefully someone can help me file an issue. My English is relatively poor, thank you very much!
But in Webtrees, images have two Orientation values. One is 0 and the other is the real value. As shown below.
Are you certain? I see 6 for both the main image and the thumbnail.
php > var_export(exif_read_data('16466539500334113853255912621296.jpg'));
array (
'FileName' => '16466539500334113853255912621296.jpg',
'FileDateTime' => 1646682786,
'FileSize' => 1595997,
'FileType' => 2,
'MimeType' => 'image/jpeg',
'SectionsFound' => 'ANY_TAG, IFD0, THUMBNAIL, EXIF, GPS, INTEROP',
'COMPUTED' =>
array (
'html' => 'width="4032" height="1816"',
'Height' => 1816,
'Width' => 4032,
'IsColor' => 1,
'ByteOrderMotorola' => 1,
'ApertureFNumber' => 'f/1.8',
'Thumbnail.FileType' => 2,
'Thumbnail.MimeType' => 'image/jpeg',
'Thumbnail.Height' => 144,
'Thumbnail.Width' => 320,
),
'ImageWidth' => 4032,
'ImageLength' => 1816,
'Make' => 'samsung',
'Model' => 'SM-G9910',
'Orientation' => 6,
'XResolution' => '72/1',
'YResolution' => '72/1',
'ResolutionUnit' => 2,
'DateTime' => '2022:03:07 19:52:55',
'YCbCrPositioning' => 1,
'Exif_IFD_Pointer' => 212,
'GPS_IFD_Pointer' => 776,
'THUMBNAIL' =>
array (
'ExifImageWidth' => 320,
'ExifImageLength' => 144,
'Compression' => 6,
'Orientation' => 6,
'XResolution' => '72/1',
'YResolution' => '72/1',
'ResolutionUnit' => 2,
'JPEGInterchangeFormat' => 1052,
'JPEGInterchangeFormatLength' => 15326,
),
'ExposureTime' => '2497831/125000000',
'FNumber' => '180/100',
'ExposureProgram' => 2,
'ISOSpeedRatings' => 320,
'ExifVersion' => '0220',
'DateTimeOriginal' => '2022:03:07 19:52:55',
'DateTimeDigitized' => '2022:03:07 19:52:55',
'UndefinedTag:0x9010' => '+08:00',
'UndefinedTag:0x9011' => '+08:00',
'ComponentsConfiguration' => '' . "\0" . '',
'ShutterSpeedValue' => '5645/1000',
'ApertureValue' => '169/100',
'BrightnessValue' => '64/100',
'ExposureBiasValue' => '0/10',
'MaxApertureValue' => '169/100',
'MeteringMode' => 2,
'Flash' => 0,
'FocalLength' => '5400/1000',
'SubSecTime' => '808446',
'SubSecTimeOriginal' => '808446',
'SubSecTimeDigitized' => '808446',
'FlashPixVersion' => '0100',
'ColorSpace' => 1,
'InteroperabilityOffset' => 745,
'SensingMethod' => 1,
'SceneType' => '',
'ExposureMode' => 0,
'WhiteBalance' => 0,
'FocalLengthIn35mmFilm' => 26,
'SceneCaptureType' => 0,
'GPSLongitudeRef' => 'E',
'GPSLongitude' =>
array (
0 => '0/1',
1 => '0/1',
2 => '0/10000',
),
'GPSAltitudeRef' => '' . "\0" . '',
'GPSAltitude' => '0/1000',
'GPSTimeStamp' =>
array (
0 => '0/1',
1 => '0/1',
2 => '0/1',
),
'GPSDateStamp' => '1970:01:01',
'InterOperabilityIndex' => 'R98',
'InterOperabilityVersion' => '0100',
)
Of course, You can upload a photo for testing and tracking.
I found in tracking and debugging that the first Orientation value(In array['Orientation' ]) of thumbnail image is always 0.So the Orientation command was not executed.
The first Orientation value(In array['Orientation' ]) in the image coding process is wrong. The correct value of is stored in array['THUMBNAIL']['Orientation' ]
When I use the following code, the picture is rotated correctly.
if($key =='Orientation' && !empty($data['THUMBNAIL']) && $data[$key] == 0 ){ $data = array_key_exists($key, $data['THUMBNAIL']) ? $data['THUMBNAIL'][$key] : false; }else{ $data = array_key_exists($key, $data) ? $data[$key] : false; }
Same issue (only the thumbnail has wrong rotation) : https://genealogie.histoiredeserignan.fr/index.php?route=%2Ftree%2Fh2s%2Findividual%2FX13695%2FEdmond-Paul-Maury Photo taken from Sony XPeria.
Your site adds watermarks to images. Therefore I cannot see the original image. Can you attach it here?
As requested:
Hopefully Github does not change image attributes/caracteristics
I think this is a problem with the image library.
There are several other error reports saying that orientate() is not working.
It should be that there is something wrong with the thumbnail generated by webtrees when processing photo. The location where the value of orientation exists in the generated thumbnail changes. Image library cannot get the value of orientation from the generated thumbnail.
Can the value of orientation in the original photo be used to judge the rotation direction?
Tested and same problem in v2.1.6. As mentioned in #3553, debugging is needed to determine why the exif headers are stripped before rotating the photo.
The bug is in the image library. I have submitted a fix. Waiting for it to be accepted.
Closing this issue, for this one: #4592