Inverted image effect: why is the image on the site flipped?

M

Maxim2015-11-18 13:56:25

Images

Maxim, 2015-11-18 13:56:25

Good day!
Today I observed such a strange thing: when uploading an image to the site, when displaying it in the browser, it "fell on its side". That is, a vertical image, 240x320px, is displayed on the site upside down by 90 degrees vertically. If you open it like this: right-click, "Open image", then it opens again as normal.
What was checked:
- CSS styles. Any missing.
- JS. Turned off. The effect is the same.
- PHP. Also there are no scripts for image processing.
I went further. I decided to open it in SublimeText - it opens upside down joxi.ru/E5mdGJ9txMRWr1
Then I uploaded it directly to Joxi - joxi.ru/LQ2KjNZfz78Nmj- try to follow the link, then right-click on the picture and "Open Image". You will be surprised =)
Hence the question: what kind of miracles are these with a picture? How could this happen? =)
PS If you open the picture in the editor and resave it, it opens normally, it does not turn over.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

max0ua, 2015-11-18
@Tomio

It's 100% in EXIF. Today I just ran into an analogue photo rotated 90 degrees, EXIF is set to Orientation 90 СW.
When viewed in the body of the page, it shows upside down, and when "open the image in a new tab" it shows the image rotated correctly. Those. modern browsers, when they show only a picture, take it (in my case, turned on its side) look at EXIF and rotate it as it should.
Compare for example:
filarmonia23.com/1.php

<html>
  <head>
    <title>EXIF ORIENTATION TEST</title>
  </head>
  <body>
    <img src="/image.jpg" />
  </body>
</html>

and the photo itself filarmonia23.com/image.jpg (by the way, in IE 9 it shows normally, i.e. it doesn’t care about EXIF)
For the project, we considered 2 solutions:
The first option is to delete all EXIF data
when uploading a photo The second option is when uploading a photo if there is EXIF data - rotate the photo according to the data.
We settled on the 2nd option.

$img = new Imagick($uploaded_img);
$orientation = $img->getImageOrientation();
switch($orientation) { 
    case imagick::ORIENTATION_BOTTOMRIGHT: 
        $img->rotateimage("#000", 180); // rotate 180 degrees 
    break; 
    case imagick::ORIENTATION_RIGHTTOP: 
        $img->rotateimage("#000", 90); // rotate 90 degrees CW 
    break; 
    case imagick::ORIENTATION_LEFTBOTTOM: 
        $img->rotateimage("#000", -90); // rotate 90 degrees CCW 
    break; 
}
$img->setImageOrientation(imagick::ORIENTATION_TOPLEFT);
$img->writeImage($uploaded_img);
$img->clear();
$img->destroy();

The first option would be something like this:

$img = new Imagick($uploaded_img);
$img->stripImage();
$img->writeImage($uploaded_img);
$img->clear();
$img->destroy();

Well, then you can already allow the user to rotate the photo, etc. etc.
php.net/manual/en/book.imagick.php