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