Force image orientation angularjs

All we need is an easy explanation of the problem, so here it is.

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) {

    var handleFileSelect=function(evt) {
      var file=evt.currentTarget.files[0];
      var reader = new FileReader();
      reader.onload = function (evt) {

how can I fix this behavior?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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 ||;
      var file    = target && target.files && target.files[0];
      var options = {canvas:true};

      var displayImg = function(img) {

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


Demo : Plunker


Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply