Post by superbrands » Fri Dec 16, 2016 10:27 pm

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.
Last edited by superbrands on Sat Dec 17, 2016 2:45 pm, edited 1 time in total.

"For us, OpenCart is not 'just' a shopping cart. OpenCart is bigger than that. We bring OpenCart to the next level."

Produk:
- Toko Online - Toko Online Dropshipper - Toko Online Marketpace - Online Directory - Digital Marketplace - Property & Business Listings - News Portal - Corporate Website - Social Network

Info: http://www.bukausahaonline.com


User avatar
Active Member

Posts

Joined
Sun May 23, 2010 8:04 pm

Post by IP_CAM » Sat Dec 17, 2016 12:08 am

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
Last edited by IP_CAM on Sat Dec 17, 2016 12:09 am, edited 1 time in total.

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by uksitebuilder » Sat Dec 17, 2016 12:09 am

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

User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by superbrands » Sat Dec 17, 2016 2:44 pm

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!

"For us, OpenCart is not 'just' a shopping cart. OpenCart is bigger than that. We bring OpenCart to the next level."

Produk:
- Toko Online - Toko Online Dropshipper - Toko Online Marketpace - Online Directory - Digital Marketplace - Property & Business Listings - News Portal - Corporate Website - Social Network

Info: http://www.bukausahaonline.com


User avatar
Active Member

Posts

Joined
Sun May 23, 2010 8:04 pm

Post by uksitebuilder » Sat Dec 17, 2016 5:20 pm

Care to share what code you used to get it working ?

User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by superbrands » Sat Dec 17, 2016 7:09 pm

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.

"For us, OpenCart is not 'just' a shopping cart. OpenCart is bigger than that. We bring OpenCart to the next level."

Produk:
- Toko Online - Toko Online Dropshipper - Toko Online Marketpace - Online Directory - Digital Marketplace - Property & Business Listings - News Portal - Corporate Website - Social Network

Info: http://www.bukausahaonline.com


User avatar
Active Member

Posts

Joined
Sun May 23, 2010 8:04 pm

Post by uksitebuilder » Sat Dec 17, 2016 7:15 pm

Thanks for that :good:

User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by uksitebuilder » 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);
                    }

User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by IP_CAM » Sat Dec 17, 2016 11:49 pm

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');
}
}

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by uksitebuilder » Sun Dec 18, 2016 12:09 am

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');
    }
}

User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by IP_CAM » Sun Dec 18, 2016 9:56 am

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

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by jimsaxton » Sat Feb 25, 2017 3:50 am

I had same problem not smartphone, and when I changed the source image to height no greater than 400 pixels the problem was solved. :)

New member

Posts

Joined
Sat Aug 16, 2014 4:25 am

Post by capte » Sun May 06, 2018 12:36 pm

Anyway we can do it in system/library/image.php ?
This way it would work also on the frontend.

New member

Posts

Joined
Tue Sep 20, 2011 9:27 pm

Post by midwicket » Fri Jul 20, 2018 6:32 am

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.

Newbie

Posts

Joined
Wed Feb 03, 2016 3:50 am

Post by leekojr » Sat Jul 10, 2021 4:41 am

Hi,
I am using 3.0.2.0, I got the same problem. Anyone could help? Really appreciated!

Newbie

Posts

Joined
Mon Feb 06, 2017 9:45 pm

Post by ekremxx » Mon Mar 07, 2022 2:59 am

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?

Newbie

Posts

Joined
Mon Mar 07, 2022 2:55 am

Post by sherriw » Tue Apr 12, 2022 1:32 am

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
}
...

User avatar
Newbie

Posts

Joined
Wed Mar 03, 2021 9:16 pm
Who is online

Users browsing this forum: No registered users and 69 guests