1

I have the following code which does a great job in taking user selected image and displaying as preview. However, images uploaded on devices running IOS have the rotation problem - they are rotated on preview. I understand that I need to access the EXIF data of the image to find out how much to rotate. The problem is, I am not able to get this to work on top of my existing code.

Here is the current function which works - excluding the ios upload issue:

function changeAvatar(input) {
    if (input.files && input.files[0]) {           
        var reader = new FileReader();
        var avatar = jQuery('.avatar_class'); 
        reader.onload = function(e) {
            loadImage(
                e.target.result,
                function (img) {
                    var imgUrl = e.target.result;
                    jQuery(avatar).css({'background-image': 'url('+imgUrl+')'});
                    jQuery('.image_value').attr({'val':imgUrl});
                }
            );
        },
    reader.readAsDataURL(input.files[0]);
    }
}

jQuery('#avatarUpload').change(function() {
    changeAvatar(this);
});

I have tried most of the scripts I could find here with no luck. I am just not sure how to access the EXIF data and then run a switch statement which would add css transform with attr rotate(xdeg).

Any advice would be much appreciated!

Now the question

HakBon
  • 63
  • 1
  • 9
  • Are you saving the images on your server? It will be better to store them in the correct rotation rather – Brett Gregson Jan 20 '18 at 17:42
  • 1
    @BrettGregson At the moment I use a custom php script to rotate the image before saving to the server. It works fine. However, I want to display the rotated image before the upload for which I cannot use the PHP script. – HakBon Jan 20 '18 at 17:47
  • 1
    Finally! Answer provided at https://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side did the trick! – HakBon Jan 20 '18 at 18:10

0 Answers0