Add note about providing a value to the orientation option.

[nateroling]

Just spent an hour debugging, trying to figure out why setting orientation: true in the options didn't do anything.

Turns out you have to provide an EXIF orientation value.

Making orientation: true work would be ideal, but for now a note in the documentation would be very helpful!

[ffranke]

Hey everyone, I was stumbling across the same problem. The orientation parameter understands numbers which is quite nice, but how can I pass the correct number from the exifs of the image? I tried to read the exifs first and save it to a variable, but that won't work... any tips? Thanks!

var orientationvalue;

  document.getElementById('imageFile').onchange = function (e) {

  loadImage.parseMetaData(
  e.target.files[0],
  function (data) {
    orientationvalue = data.exif.get('Orientation');
  }
  )

  loadImage(
    e.target.files[0],
    function (img) {

    imgdata = img.toDataURL();
    myImageUrl =  imgdata;
    }, {
    canvas:true, 
    maxWidth:800, 
    MaxHeight:800, 
    orientation: orientationvalue, 
    noRevoke: true
    } // Options
)  

};

[hppycoder]

Here's what I am doing to change the orientation:

var file = evt.target.files[0];

            loadImage.parseMetaData(
              file,
              function(data) {
                var orientation = 0;
                if(typeof(data.exif) !== 'undefined') {
                  orientation = parseInt(data.exif.get('Orientation'));
                }

                loadImage(
                  file,
                  function(canvas) {
                    var randomNumber = Math.random();
                    canvas.id = 'canvas-'+randomNumber;
                    canvas.style.display = 'none';
                    angular.element('body').append(canvas);

                    var source = document.getElementById('canvas-'+randomNumber);
                    console.log(source.toDataURL('image/jpeg'));
                    source.remove();
                  },
                  {
                    maxWidth: 1500,
                    orientation: orientation,
                    canvas: true
                  }
                );
              }
            );

[ffranke]

Thanks for the amazingly quick answer! Helps a lot! I just found out, that it works, if loadImage is in the function, function (data) { }.

Thanks!

[hppycoder]

Not a problem! Hope it's extremely successful in your project.

[jturolla]

I'm trying to use the parseMetadata with a remote (URL) image, is that a problem?

[blueimp]

If you want to use true as orientation value, you can use this wrapper:

function loadImageWrapper(file, callback, options) {
    if (options.orientation === true) {
        loadImage.parseMetaData(file, function (data) {
            if (data.exif) {
                options.orientation = data.exif.get('Orientation');
            }
            loadImage(file, callback, options);
        }
    }
}

[Grsmto]

Commenting on this cause it's the more appropriate:
If someone try to use canvas: false and is wondering why he still have a canvas coming out, that's because you need to set all the options related to canvas to false too (orientation, crop).
I will manage to do a PR to fix this but it seems to be done on purpose. For me setting the canvas: false shouldn't return a canvas in any case.
Plus the test for Return img element to callback if canvas is not true is wrong because the canvas option doesn't have any default and no option is passed to the test. If you pass for example crop: true, the test fails.

[blueimp]

Thanks for your feedback, @Grsmto.
Although this might not be completely clear from the API, using any options that require canvas imply canvas:true. Disabling this behaviour would break any application which doesn't explicitly set canvas:true and would therefore be not a good idea in my opinion.