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.

Please don't send me OC Forum Personal Messages, just contact: jti@jacob.ch
---
OC 1.5.6.5 LIGHT Test Site: http://www.bigmax.ch/shop/
OC 1.5.6.5 V-PRO Test Site: http://www.jacob.ch/shop/
My Github OC Site: https://github.com/IP-CAM
2'600+ FREE OC Extensions on the World's largest 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

ImageImageImageImageImage

For Friendly Professional Support - Click Here


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 ?

ImageImageImageImageImage

For Friendly Professional Support - Click Here


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:

ImageImageImageImageImage

For Friendly Professional Support - Click Here


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

ImageImageImageImageImage

For Friendly Professional Support - Click Here


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

Please don't send me OC Forum Personal Messages, just contact: jti@jacob.ch
---
OC 1.5.6.5 LIGHT Test Site: http://www.bigmax.ch/shop/
OC 1.5.6.5 V-PRO Test Site: http://www.jacob.ch/shop/
My Github OC Site: https://github.com/IP-CAM
2'600+ FREE OC Extensions on the World's largest 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');
    }
}

ImageImageImageImageImage

For Friendly Professional Support - Click Here


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

Please don't send me OC Forum Personal Messages, just contact: jti@jacob.ch
---
OC 1.5.6.5 LIGHT Test Site: http://www.bigmax.ch/shop/
OC 1.5.6.5 V-PRO Test Site: http://www.jacob.ch/shop/
My Github OC Site: https://github.com/IP-CAM
2'600+ FREE OC Extensions on the World's largest 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
Who is online

Users browsing this forum: No registered users and 27 guests