Siła orientacji obrazu angularjs

Question

Mam dziwne zachowanie, gdy ładuję obraz i jeśli ten rozmiar obrazu ma większą wysokość niż w przypadku, obraz obraca się o 90 stopni.

check to fiddle że używa ngImgCrop i to jest image że mam przesłać

kod z ngDmgCrop to dość standardowy:

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); 
    }); 

jak mogę rozwiązać ten problem?

Answer 1

Będziesz musiał przeanalizować dane exif w nagłówku obrazu, zbadać znacznik Orientacja i odpowiednio obrócić.

po prostu rozwiązać ten sam problem z tej biblioteki: Javascript Load Image

W swoim 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

Cheers.