Angularjs image orientation enhancement

Question

I have this weird behavior when I upload an image, and if this image size has a higher height than when the image is increased by 90 degrees.

check fiddle using ngImgCrop and this is the image i load

ngDmgCrop code is pretty standard:

angular.module('app', ['ngImgCrop']) .controller('Ctrl', function($scope) { $scope.myImage=''; $scope.myCroppedImage=''; var handleFileSelect=function(evt) { var file=evt.currentTarget.files[0]; var reader = new FileReader(); reader.onload = function (evt) { $scope.$apply(function($scope){ $scope.myImage=evt.target.result; }); }; reader.readAsDataURL(file); }; angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect); }); 

How can I fix this behavior?

Answer 1

You will need to analyze the exif data in the image header, inspect the Orientation tag and rotate accordingly.

I just solved the same problem with this library: Downloading Javascript

In app.js

  var handleFileSelect = function(evt) { 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.myImage=img.toDataURL(); }); } loadImage.parseMetaData(file, function (data) { if (data.exif) { options.orientation = data.exif.get('Orientation'); } loadImage(file, displayImg, options ); }); }; 

Demo: Plunker

Greetings.