Force image orientation angularjs

angularjs, angularjs-directive

Solution

You'll have to parse the exif data in the image header, examine the Orientation tag, and rotate accordingly.

I just solved the same problem with this library: Javascript Load Image

In your 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.

Problem

I have this odd behavior when I upload an image and if this image size has more height than with I get the image rotated 90 degrees. check this fiddle that's using ngImgCrop and this is the image that I'm uploading the code of the ngDmgCrop it's 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?

Original source