Saved product images are rotated 90 degrees counterclockwise

[arctic-carbide]

Description

What were you trying to do?

Create products and upload pictures taken with my phone (picture used for testing). The steps I did are as follows:

• Take a picture with a digital camera or phone camera.
• Navigate to LiteCart catalog page and create a new product.
• Upload picture as a product image.
• Save the product.

What actually happened?

When I upload a picture (taken with a digital camera) to a product, its orientation looks correct. However, when I save a product, the picture is rotated 90 degrees counterclockwise. This is also the case for its thumbnail and how it appears in store pages.

What did you expect to happen?

I expected the picture to remain the same orientation as I uploaded it. The image looks correct in my phone gallery and desktop apps I've sent it to. There don't appear to be any settings that influence the orientation of the image itself. My own research suggests that the EXIF orientation tag for images captured with a digital camera isn't being considered in LiteCart to the image after upload. It is unclear when the problem occurs as my own attempts to fix image rotation before it's stored in the database haven't worked.

Using InfraView, I confirmed the image correctly has orientation flag 1 for a portrait picture. When this flag is not considered, the image is rotated the same in InfraView as it is in LiteCart.

Workarounds?

I found two forum posts that appear to be related. Based on these posts, it seems like I should be able to resave the image on my desktop but trying to save it with Windows Photos failed to fix it and stripping the EXIF data from "Properties > Details" didn't seem to work either. What has worked for me is taking an uploaded file to a third-party app (i.e. Discord) and saving that file instead.

• Image is rotated in 2.2.9
• Product images rotated 90degrees counterclockwise

LiteCart Version

LiteCart 2.5.5

PHP Version

PHP 8.2

Error/Backtrace

No response

Is this a problem that can be reproduced in the demo platform?

Yes

If this problem could be related to a browser. Which one?

Firefox

[timint]

Is this related to PHP GD or Imagick library?

[arctic-carbide]

Unsure. The online discussions I found suggested neither library automatically rotates images. Most posts I found described writing a custom function to rotate images. I could not find anything regarding GD for auto rotations but Imagick in particular appears to have support to auto rotate in their command line tool but it seems as though you have to manually call it in code to apply the same effect.

I was attempting to inject my own code with a vmod that used GD to rotate the image but was unsuccessful doing so, and I was unable to determine how the image is being queried and processed after saving the product to rule out if this was something that occurred before or after the image was saved to the database.

[timint]

With GD you can try something like this:

    // Get the EXIF data of the image
    $exif = exif_read_data($filename);
    
    // Check if orientation data exists
    if (isset($exif['Orientation'])) {
        $orientation = $exif['Orientation'];
        
        // Determine the rotation angle based on orientation
        switch($orientation) {
            case 3:
                $image = imagerotate($image, 180, 0);
                break;
            case 6:
                $image = imagerotate($image, -90, 0);
                break;
            case 8:
                $image = imagerotate($image, 90, 0);
                break;
        }
    }

And for Imagick:

    // Get the EXIF orientation of the image
    $orientation = $imagick->getImageOrientation();
    
    // Determine the rotation angle based on orientation
    switch($orientation) {
        case Imagick::ORIENTATION_TOPRIGHT:
            $imagick->rotateImage("none", 90);
            break;
        case Imagick::ORIENTATION_BOTTOMRIGHT:
            $imagick->rotateImage("none", 180);
            break;
        case Imagick::ORIENTATION_BOTTOMLEFT:
            $imagick->rotateImage("none", -90);
            break;
    }
    
    // Fix the orientation so that the image displays correctly
    $imagick->setImageOrientation(Imagick::ORIENTATION_TOPLEFT);

Thank you ChatGPT