14

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]);
    }
}
Manideep Yechuri
  • 293
  • 1
  • 3
  • 14
  • Can we see a code snippet to see how you are uploading it? – maraaaaaaaa Mar 09 '17 at 18:32
  • Hi @maksymiuk, please find the updated question. Please let me know if u need any more – Manideep Yechuri Mar 09 '17 at 18:51
  • the jquery is pretty straightforward, nothing really stands out to me that would cause the image to rotate. Are you uploading to the server or does the image rotate when you append the e.target.result to the #uploadimage element? – KFE Mar 09 '17 at 18:52
  • @KFE, During upload itself the image is being rotated – Manideep Yechuri Mar 09 '17 at 18:55
  • since it is only happening on your phone, did you try to copy that image into your computer and see if image is correct rotation. sometimes phones can rotate photo to fit on phone screen but the original photo might be still not. If there is nothing for rotation in your backend code, I don't see anything would cause it in js code. – serdar.sanri Mar 09 '17 at 19:01
  • @guyfawkes, checked in samsung s6 also, there it is different behavior. Taking photo and uploading the same is being rotated but when we try to select an image from gallery, it is working fine. Is it problem with device orientation itself then? – Manideep Yechuri Mar 09 '17 at 19:04
  • Most likely it is. – serdar.sanri Mar 09 '17 at 19:05

2 Answers2

19

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.

Fabian Horlacher
  • 1,899
  • 1
  • 24
  • 31
  • It is working fine for big size images, however the small size images are being rotated after adding this implementation which is not happening earlier. – Manideep Yechuri Mar 15 '17 at 07:02
  • Which implementation did you use, JQuery or ImageMagick? Can you check if these small images have the proper orientation flag set as the big ones? You can use this website: http://exif-viewer.com/ – Fabian Horlacher Mar 15 '17 at 09:24
  • used JQuery one – Manideep Yechuri Mar 15 '17 at 13:17
  • What is the output of `console.log('Exif=', EXIF.getTag(this, "Orientation"));` (-> see example)? Is a `rotate-[x]` class added to the HTML? Btw. use tools like "Chrome Mobile DevTools" to debug – Fabian Horlacher Mar 15 '17 at 13:24
  • Hey @Fabian, the orientation is coming fine for the first time. But when change the image with different orientation, still it is showing the previous image orientation. Please suggest what need to be done. – Manideep Yechuri May 16 '17 at 06:19
  • Can you post an example on JSFiddle with your own image? – Fabian Horlacher May 17 '17 at 08:34
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.

galki
  • 8,149
  • 7
  • 50
  • 62