Page 1 of 1

[SOLVED] Portrait oriented pictures taken with smartphone

Posted: Fri Dec 16, 2016 10:27 pm
by superbrands
Portrait oriented pictures taken with smartphone without any editing after uploaded to server via the OpenCart filemanager are displayed as landscape oriented pictures.

If I edit the pictures with the photo editor (from smartphone) or photoshop (from PC), the pictures are displayed correctly (portrait oriented).

How to fix this problem?

Thanks.

Re: Portrait oriented pictures taken with smartphone

Posted: Sat Dec 17, 2016 12:08 am
by IP_CAM
How to fix this problem?
at best, by using the landscape format, when creating images with a smartphone.
OC cannot handle such, by default, and if some Smartphones do technically not
'follow' common Web Standard regulations, it's not OC's fault either.
Ernie

Re: Portrait oriented pictures taken with smartphone

Posted: Sat Dec 17, 2016 12:09 am
by uksitebuilder
I have seen this happen a couple of times with a client who snaps away on her mobile phone and uploads to her blog in OC via the phone/admin

It seems the the exif orientation info is ignored

To solve, the originally uploaded image should have it's exif information read by PHP

Code: Select all

$exif = exif_read_data($source_image);
Then:

Code: Select all

if(isset($exif['Orientation'])&& $exif['Orientation'] == '6'){
     // rotate the image 90° clockwise
} elseif(isset($exif['Orientation'])&& $exif['Orientation'] == '8'){
     // rotate the image 270° clockwise
}
Just trying to figure out where in the system/library/image.php file to do this test/fix

I think it should be done before resizing for sure.

Need to test when I have 20 minutes to spare.

Unless someone else has time

Re: Portrait oriented pictures taken with smartphone

Posted: Sat Dec 17, 2016 2:44 pm
by superbrands
uksitebuilder wrote:I have seen this happen a couple of times with a client who snaps away on her mobile phone and uploads to her blog in OC via the phone/admin

It seems the the exif orientation info is ignored

To solve, the originally uploaded image should have it's exif information read by PHP

Code: Select all

$exif = exif_read_data($source_image);
Then:

Code: Select all

if(isset($exif['Orientation'])&& $exif['Orientation'] == '6'){
     // rotate the image 90° clockwise
} elseif(isset($exif['Orientation'])&& $exif['Orientation'] == '8'){
     // rotate the image 270° clockwise
}
Just trying to figure out where in the system/library/image.php file to do this test/fix

I think it should be done before resizing for sure.

Need to test when I have 20 minutes to spare.

Unless someone else has time
It works! Thank you very much!

Re: [SOLVED] Portrait oriented pictures taken with smartphon

Posted: Sat Dec 17, 2016 5:20 pm
by uksitebuilder
Care to share what code you used to get it working ?

Re: [SOLVED] Portrait oriented pictures taken with smartphon

Posted: Sat Dec 17, 2016 7:09 pm
by superbrands
I use the code from here:

http://php.net/manual/en/function.exif-read-data.php (the top User Contributed Notes)

It is similar to your code. The basic idea is if the image is in JPG format and the EXIF Orientation is 8 or 3 or 6 then rotate the image first before upload it to server.

Here is the full code:

OpenCart v2.3.0.2

Modified file: admin/controller/common/filemanager.php (I use ocMod to handle file modification)

Find this script (Line-288):

Code: Select all

move_uploaded_file($file['tmp_name'], $directory . '/' . $filename);
Replace with:

Code: Select all

                   
                    $image = imagecreatefromstring(file_get_contents($file['tmp_name']));

                    $ext = utf8_strtolower(utf8_substr(strrchr($filename, '.'), 1));

                    if ($ext == 'jpg') {
                        $exif = exif_read_data($file['tmp_name']);

                        if(!empty($exif['Orientation'])) {
                            switch($exif['Orientation']) {
                                case 8:
                                    $image = imagerotate($image,90,0);
                                    break;
                                case 3:
                                    $image = imagerotate($image,180,0);
                                    break;
                                case 6:
                                    $image = imagerotate($image,-90,0);
                                    break;
                            }
                        }

                        imagejpeg($image, $directory . '/' . $filename);

                        // Free up memory
                        imagedestroy($image);
                    } else {
                        move_uploaded_file($file['tmp_name'], $directory . '/' . $filename);
                    }

I don't know how efficient this code is. But, it works for me. So, yeah, I will use it.

If you find any bugs, please let me know.

Thanks.

Re: [SOLVED] Portrait oriented pictures taken with smartphon

Posted: Sat Dec 17, 2016 7:15 pm
by uksitebuilder
Thanks for that :good:

Re: [SOLVED] Portrait oriented pictures taken with smartphon

Posted: Sat Dec 17, 2016 7:36 pm
by uksitebuilder
Only made a small change, just moved the imagecreatefromstring into the if/else condition as it is not needed if the image is not a jpeg.

Code: Select all

                    $ext = utf8_strtolower(utf8_substr(strrchr($filename, '.'), 1));

                    if ($ext == 'jpg' || $ext == 'jpeg') {
                        $image = imagecreatefromstring(file_get_contents($file['tmp_name']));
                        
                        $exif = exif_read_data($file['tmp_name']);

                        if(!empty($exif['Orientation'])) {
                            switch($exif['Orientation']) {
                                case 8:
                                    $image = imagerotate($image,90,0);
                                    break;
                                case 3:
                                    $image = imagerotate($image,180,0);
                                    break;
                                case 6:
                                    $image = imagerotate($image,-90,0);
                                    break;
                            }
                        }

                        imagejpeg($image, $directory . '/' . $filename);

                        // Free up memory
                        imagedestroy($image);
                    } else {
                        move_uploaded_file($file['tmp_name'], $directory . '/' . $filename);
                    }

Re: [SOLVED] Portrait oriented pictures taken with smartphon

Posted: Sat Dec 17, 2016 11:49 pm
by IP_CAM
well, GOOD WORK, if you could link or upload such an image, others could find out, if this Modification also works in other OC v.2 Versions, in my OC v.2.2.x Version, the filemanager works without any error, after installing the MOD, but I cannot test, if it does it's job ! :-\
Ernie
---
Unfortunately, the OC v.1.5.x Versions have this in a different way, and this is, where my wisdom finds it's limits...

Code: Select all

if (!isset($json['error'])) {
if (@move_uploaded_file($this->request->files['image']['tmp_name'], $directory . '/' . $filename)) {
$json['success'] = $this->language->get('text_uploaded');
} else {
$json['error'] = $this->language->get('error_uploaded');
}
}

Re: [SOLVED] Portrait oriented pictures taken with smartphon

Posted: Sun Dec 18, 2016 12:09 am
by uksitebuilder
Hi Ernie,

Please try the below code, replacing the code you posted

Code: Select all

if (!isset($json['error'])) {
    if (@move_uploaded_file($this->request->files['image']['tmp_name'], $directory . '/' . $filename)) {
        $ext = utf8_strtolower(utf8_substr(strrchr($filename, '.'), 1));
        if ($ext == 'jpg' || $ext == 'jpeg') {
            $image = imagecreatefromjpeg($directory . '/' . $filename);
                        
           $exif = exif_read_data($directory . '/' . $filename);

           if(!empty($exif['Orientation'])) {
               switch($exif['Orientation']) {
                   case 8:
                   $image = imagerotate($image,90,0);
                   break;
                   case 3:
                   $image = imagerotate($image,180,0);
                   break;
                   case 6:
                   $image = imagerotate($image,-90,0);
                   break;
               }
           }

           imagejpeg($image, $directory . '/' . $filename, 90);

           // Free up memory
           imagedestroy($image);
        }
        $json['success'] = $this->language->get('text_uploaded');
    } else {
        $json['error'] = $this->language->get('error_uploaded');
    }
}

Re: [SOLVED] Portrait oriented pictures taken with smartphon

Posted: Sun Dec 18, 2016 9:56 am
by IP_CAM
thank you very much, uksitebuilder! Now, I just have to look around for an iPhone portrait image, to find out, so far, your Mod created no errors, and the Filemanager works. But I won't do it tonight, we had our Christmas Party in my Club, and it has been a very busy hot night. :D
Ernie

Re: [SOLVED] Portrait oriented pictures taken with smartphone

Posted: Sat Feb 25, 2017 3:50 am
by jimsaxton
I had same problem not smartphone, and when I changed the source image to height no greater than 400 pixels the problem was solved. :)

Re: [SOLVED] Portrait oriented pictures taken with smartphone

Posted: Sun May 06, 2018 12:36 pm
by capte
Anyway we can do it in system/library/image.php ?
This way it would work also on the frontend.

Re: [SOLVED] Portrait oriented pictures taken with smartphone

Posted: Fri Jul 20, 2018 6:32 am
by midwicket
Hi all,

I am running opencart v2.1.0.2 and unfortunately none of these code mods work for me. I noticed that the line in filemanager.php which needs replacing is slightly different than the one posted. Would that be the problem?

The script in my code is:

Code: Select all

move_uploaded_file($this->request->files['file']['tmp_name'], $directory . '/' . $filename);
Where as the script in superbrands code is:

Code: Select all

move_uploaded_file($file['tmp_name'], $directory . '/' . $filename);
I'd be really grateful if someone could assist. I have a tonne of images uploaded that are all sideways.

Re: [SOLVED] Portrait oriented pictures taken with smartphone

Posted: Sat Jul 10, 2021 4:41 am
by leekojr
Hi,
I am using 3.0.2.0, I got the same problem. Anyone could help? Really appreciated!

Re: [SOLVED] Portrait oriented pictures taken with smartphon

Posted: Mon Mar 07, 2022 2:59 am
by ekremxx
uksitebuilder wrote:
Sat Dec 17, 2016 7:36 pm
Only made a small change, just moved the imagecreatefromstring into the if/else condition as it is not needed if the image is not a jpeg.

Code: Select all

                    $ext = utf8_strtolower(utf8_substr(strrchr($filename, '.'), 1));

                    if ($ext == 'jpg' || $ext == 'jpeg') {
                        $image = imagecreatefromstring(file_get_contents($file['tmp_name']));
                        
                        $exif = exif_read_data($file['tmp_name']);

                        if(!empty($exif['Orientation'])) {
                            switch($exif['Orientation']) {
                                case 8:
                                    $image = imagerotate($image,90,0);
                                    break;
                                case 3:
                                    $image = imagerotate($image,180,0);
                                    break;
                                case 6:
                                    $image = imagerotate($image,-90,0);
                                    break;
                            }
                        }

                        imagejpeg($image, $directory . '/' . $filename);

                        // Free up memory
                        imagedestroy($image);
                    } else {
                        move_uploaded_file($file['tmp_name'], $directory . '/' . $filename);
                    }

yes it worked thanks. Also I am using Bulk image upload module, can we apply it?

Re: [SOLVED] Portrait oriented pictures taken with smartphone

Posted: Tue Apr 12, 2022 1:32 am
by sherriw
For anyone looking to apply this fix on the front end image upload:
public/system/library/image.php
(I am using OC version 3.0.3.6.)

First, add this function in the public/system/library/image.php file:

Code: Select all

private function rotatePortrait() {

        $exif = exif_read_data($this->file);

        if (is_array($exif) && array_key_exists('Orientation', $exif) && !empty($exif['Orientation'])) {
            switch ($exif['Orientation']) {
                case 8:
                    $this->image = imagerotate($this->image, 90, 0);
                    $tmpWidth = $this->width;
                    $this->width = $this->height;
                    $this->height = $tmpWidth;
                    break;
                case 3:
                    $this->image = imagerotate($this->image, 180, 0);
                    break;
                case 6:
                    $this->image = imagerotate($this->image, -90, 0);
                    $tmpWidth = $this->width;
                    $this->width = $this->height;
                    $this->height = $tmpWidth;
                    break;
            }
        }
    }
Then in the __construct function in the same file, add this line:

Code: Select all

...
if ($this->mime == 'image/gif') {
    $this->image = imagecreatefromgif($file);
} elseif ($this->mime == 'image/png') {
    $this->image = imagecreatefrompng($file);
} elseif ($this->mime == 'image/jpeg') {
    $this->image = imagecreatefromjpeg($file);
    $this->rotatePortrait(); // <-- ADD THIS LINE
}
...