Am I serving my images incorrect, they are all shown rotated 90 degrees

Question

I've once found this code to serve images from my server to the client:

$filename = $_GET["filename"];
if ($filename == null || strlen($filename) < 1){
    return null;
}

$fp = fopen($filename, 'rb');

// send the right headers
header("Content-Type: image/jpeg");
header("Content-Length: " . filesize($filename));

// dump the picture and stop the script
fpassthru($fp);
exit;

When I run this php file via the browser (like call this script in the addressbar of the browser), a portrait image shows portrait. But when I run this in an HTML file (I set the src of an img element dynamically) all portrait images are shown landscape (like rotated 90 degrees).

Should I include something in the response(-headers) that the image is landscape or portrait?

This is the way I load the image in the html:

document.getElementById('next').src = "image.php?filename=" + data;

This is what the request looks like when it's called from my html page and when the image shows correct:

And this is the incorrect version

I can see the headers differ, but does that make a difference? (besides I would know how to set the headers when I set the image source)

One thing I also noticed was that in both cases, when I rightclick and save the image, the filename is image.jfi which I think is a weird extension?

Check your images' meta data that describe the orientation. I'm not sure if browsers respect this or not? — Progrock, Mar 03 '18 at 11:39
Difference between in the browser and in html is that *in the browser* I paste the link (like http://server/image.php?filename=xxxx) in the addressbar and then the browser shows an image. The *in html* part is where I use this hrml code to load the image in an `img` element : `document.getElementById('next').src = "image.php?filename=" + data;` — Michel, Mar 03 '18 at 12:54
When I view just an image with exif orientation in the browser the orientation is respected. Whereas if loaded via an img tag in a html document it doesn't seem to be. — Progrock, Mar 03 '18 at 13:28
See: https://stackoverflow.com/questions/12026441/is-there-a-way-to-tell-browsers-to-honor-the-jpeg-exif-orientation and https://stackoverflow.com/a/9371408/3392762 — Progrock, Mar 03 '18 at 13:28
I see the orientation is not respected. Howeve, I've never had this issue with any other picture on any of my websites. — Michel, Mar 03 '18 at 13:53
An aside: your code may be a security concern. e.g. `?filename=/etc/passwd`. — Progrock, Mar 03 '18 at 15:49
@SougataBose The files are not in a location in the webserver, so I can't serve them from the webserver. — Michel, Mar 06 '18 at 13:17

ABelikov · Accepted Answer · 2018-03-08T12:14:14.347

Orientation was setted in Exif. Picture wasn't rotated phisicaly. Image-viewer can to work with it but the browser in tag doesn't rotate it.

Your can rotate pictures on server by imagemagick --auto-orient http://imagemagick.org/Usage/photos/#orient

You can also rotate it "on fly". Just get Exif info by exif_read_data() and rotate it if it has 3(180degree), 6(90CW), or 8(-90CCW) in 'Orientation'

// dump the picture and stop the script
$source = imagecreatefromjpeg($filename);
$exif = exif_read_data($filename);
if (isset($exif['Orientation'])) {
   switch($exif['Orientation']) {
        case 3: // 180 degree
            $rotate=imagerotate($source,180,0);
            break;
        case 6: // 90 CW
            $rotate=imagerotate($source,-90,0);
            break;
        case 8: // 90 CCW
            $rotate=imagerotate($source,90,0);
            break;
        default:
            $rotate=imagerotate($source,0,0);
            break;
    }
    imagejpeg($rotate);
    imagedestroy($source);
    imagedestroy($rotate);
} else {
    imagejpeg($source);
    imagedestroy($source);
}

But of course better to prepare all pictures once.

hmmm. I wonder if there is something wrong with the picture itself — Michel, Mar 06 '18 at 17:55
It's not "something wrong". Just orientation wich devices set in exif. Image viewer undestands it, browser parser doesn't. That's all. Rotate all pictures by some tool (search "rotate by exif info") or do it on fly. — ABelikov, Mar 07 '18 at 08:21

Am I serving my images incorrect, they are all shown rotated 90 degrees

1 Answers1