Images are being rotated by default upon upload

Question

I am trying to take a photo and upload the same into my application using Samsung S7. But the image is being rotated upon upload. Even if I am selecting the image from gallery also, it is being rotated upon upload. Is there anything that we can fix from jquery code. Please suggest. Thanks in advance

HTML:

<div class="photo-div" id="photo">
                <img id="uploadimage" src="" hidden="">
            </div>

<label id="files-label" for="files" class=" myprofile-btn-bold">Replace Image</label>
<input id="files" style="display:none;" type="file" accept="image/*" onchange="readURL(this);">

Jquery:

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#files-label').html('Replace Image');
            $('.photo-image').removeClass('photo-image');
            $('#uploadimage').attr('src', e.target.result);
            $("#headshot-message").hide();
            $("#headshot-cancel").hide();
            $('#noimage-label').addClass('hidden');
        }

        reader.readAsDataURL(input.files[0]);
    }
}

Answer 1

When you turn around your phone to take pictures, the light strikes the camera sensor on the orientation as you hold the phone. The camera app does not save images turned as you see them on the screen, but it just flags them with the current EXIF orientation data from the orientation sensor.

This information is interpreted by your gallery app to show the image accordingly, but a browser ignores it and shows the pictures as they were taken by the sensors perspective.

Turning around images:

You can turn and save the pictures according to the EXIF data on a server with imagemagick auto-orient:

convert uploadedImage.jpg -auto-orient turnedImage.jpg

Or turn them with JavaScript on the client with the exif-orient Script or with jQuery as explained in this post.

Answer 2

This is a native PHP alternative to the ImageMagick solution:

When you take a picture your phone saves any rotation metadata in EXIF headers. When you upload the image to your server, that metadata is still sitting there but it's your job to apply it to the image to rotate it (if you want). In PHP you can use a function called exif_read_data:

function correctImageOrientation($filename)
{
    $exif = exif_read_data($filename);
    if ($exif && isset($exif['Orientation'])) {
        $orientation = $exif['Orientation'];
        if ($orientation != 1) {
            $img = imagecreatefromjpeg($filename);
            $deg = 0;
            switch ($orientation) {
                case 3:
                    $deg = 180;
                    break;
                case 6:
                    $deg = 270;
                    break;
                case 8:
                    $deg = 90;
                    break;
            }
            if ($deg) {
                $img = imagerotate($img, $deg, 0);
            }
            imagejpeg($img, $filename, 95);
        }
    }
}

To use the function as-is simply call it after you save the file. For more info and an additional PHP solution see the original source.