javascript - 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.