Fix orientation for image uploaded

[xzegga]

how I can keep original image orientation for uploaded file? actually if I upload image with a greater height to width, the image is retated and not keep original orientation.

[chorsnell]

Is this on an iOS device the images are being taken?

[xzegga]

The photo was taken with iphone but I am experiencing this problem in desktop.

[arshtepe]

@xzegga, Maybe this help http://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images

[chorsnell]

Yes also http://stackoverflow.com/questions/10600613/ios-image-orientation-has-strange-behavior

Basically iOS does wierd stuff with the orientation. Server side I manually rotate the image based on detecting iOS source + orientation EXIF data, but the progress thumb is still incorrectly oriented.

Is it going to be a case of reading EXIF data manually, or can we expect a fix?

[arshtepe]

Is it going to be a case of reading EXIF data manually, or can we expect a fix?

@poppahorse I think about this. Maybe add as module. Maybe in next week

[JensWinter]

+1

[xzegga]

+1

[Chuck-Aguilar]

Basically iOS does wierd stuff with the orientation. Server side I manually rotate the image based on detecting iOS source + orientation EXIF data, but the progress thumb is still incorrectly

@poppahorse

How did you manually rotate it? I'm having the same problem :/

thanks

[Chuck-Aguilar]

Photo Rotation.zip

I did it in the preview, not just for iOS, but for each system. I didn't yet in server side :(

Here's the code for thumbs:

<input id="upload_button" type="file" nv-file-select="" uploader="uploader" multiple/>

and

<img ng-show="uploader.isHTML5" ng-src="{{pic}}" height="100%" />

then in controller:

var handleFileSelect = function(evt) { $scope.pic = "";

        var target = evt.dataTransfer || evt.target;
        var file = target && target.files && target.files[0];
        var options = {
            canvas: true
        };

        var displayImg = function(img) {
            $scope.$apply(function($scope) {
                $scope.pic = img.toDataURL();
            });
        };

        loadImage.parseMetaData(file, function(data) {
            if (data.exif) {
                options.orientation = data.exif.get('Orientation');
            }
            loadImage(file, displayImg, options);
        });

    };
    angular.element(document.querySelector('#upload_button')).on('change', handleFileSelect);'

and you need the two attached files and 'ngImgCrop' in app.js

If someone could help me to do it in server, I would be pretty happy. 'Cause I send the pic just with the angular-file-upload work, and it doesn't make the EXIF changes.

Thanks!!

[arshtepe]

I already wrote module, but i need photo from ipone for test ( please pack photo in zip or rar ).

[Chuck-Aguilar]

Pics.zip

Here you go :)

Many thanks :+1:

Just a question, do you send in your module the pic turned? or is it just to show it?

[Chuck-Aguilar]

Well, I have a solution.

In server side, we've to add:

var blob = dataURItoBlob(photoController.pic); $scope.rotatedFile = blob;

var dataURItoBlob = function(dataURI) { var binary = atob(dataURI.split(',')[1]); var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; var array = []; for(var i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } return new Blob([new Uint8Array(array)], {type: mimeString}); };

and then:

`uploader.onBeforeUploadItem = function(item) { $log.debug('onBeforeUploadItem', item);

        item._file = $scope.rotatedFile;
    };`

And so it works ;)

[bettysteger]

@Chuck-Aguilar do you really need to do this

angular.element(document.querySelector('#upload_button')).on('change', handleFileSelect);'

can't you use

            uploader.onAfterAddingFile = function(item) {
                var file = item._file; // <-- use this?
                    var options = {canvas: true, maxHeight: 1000, maxWidth: 1000};

                    // Exif orientation
                    // @see https://github.com/nervgh/angular-file-upload/issues/585#issuecomment-190790841
                    loadImage.parseMetaData(file, function(data) {
                        if (data.exif) {
                            options.orientation = data.exif.get('Orientation');
                        }
                        loadImage(file, function (img) {
                            $ionicLoading.hide();
                            $scope.$apply(function() {
                                $scope.cropped.source = img.toDataURL();
                            });
                        }, options);
                    });
          });

[bettysteger]

@Chuck-Aguilar ok that was really strange, it was not working on android, but on iPhone ;)

I am using this now, but I don't like it :/

var file = document.querySelector('input[type=file]').files[0]; //item._file;

[BahodurSaidov]

same here with android camera photo... any updates...?

[BahodurSaidov]

@lpsBetty hey, could you please share a working example of your hack to exif orientation?? in my case i have 2 parallel uploader instances, and the 1st instance uploads images only.. so i am stuck with incorrect orientation .... plz help

[BahodurSaidov]

@arshtepe Hi, where is your module you talk about ? I compared your forked dist/ v2.2.0 with the original dist/ but no difference... I am still stuck on this confusing step

[bettysteger]

@BahodurSaidov sorry for the late answer, I just did it like https://github.com/nervgh/angular-file-upload/issues/585#issuecomment-190790841

uploader.onAfterAddingFile = function(item) {
    var file = document.querySelector('input[type=file]').files[0]; //item._file;

    $scope.cropped = {};

    var options = {canvas: true, maxHeight: 1000, maxWidth: 1000};

    // Exif orientation
    // @see https://github.com/nervgh/angular-file-upload/issues/585#issuecomment-190790841
    loadImage.parseMetaData(file, function(data) {
        if (data.exif) {
            options.orientation = data.exif.get('Orientation');
        }
        loadImage(file, function (img) {

            if(img.type === 'error') {
                clearUpload();
                ErrorFactory.setErrorMessage('', 'Please try another image.');
            } else {
                $scope.$apply(function() {
                    $scope.cropped.source = img.toDataURL();
                });
            }

        }, options);
    });

};

[adamreisnz]

Any solution that's available for the orientation problem?

I am finding that photo's taken on Android are consistently mis-oriented, with EXIF data seemingly ignored, both after a resize and when using ngf-thumbnail, whether ngf-fix-orientation is used or not.