Принудительная ориентация изображения angularjs

У меня есть это странное поведение, когда я загружаю изображение, и если этот размер изображения имеет большую высоту, чем у меня, изображение поворачивается на 90 градусов.

проверить это скрипка, С помощью ngImgCrop и это изображения что я загружаю

код ngDmgCrop это довольно стандартный:

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

Как я могу исправить это поведение?

8
angularjs angularjs-directive

1 ответов

вам придется проанализировать данные exif в заголовке изображения, изучить тег ориентации и соответственно повернуть.

Я только что решил такую же проблему с этой библиотекой: Javascript Загрузить Изображение

в своем 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 );
      });

  };

демо : Plunker

Ура.

11