我提供的图像不正确吗，它们都显示为旋转90度

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?

Answer 1

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.