Javascript EXIF Image Orientation and Image Preview

Question

I have a PHP file input and some javascript that displays a small preview of the image that has been selected for upload. My question is how do I read the EXIF data and display (in preview) the image in its correct orientation?

PHP file input

<div id="dropzone">
        <div>Add Photo</div>
        <?php echo elgg_view('input/file', array(
              'name' => 'upload',
              'accept' => 'image/jpeg, image/JPG, image/png',
        )); ?>
</div>

Javascript

/* Find any element which has a 'data-onload' function and load that to simulate an onload. */ $('[data-onload]').each(function(){ eval($(this).data('onload')); });    

$(function() {

  $('#dropzone').on('dragover', function() {
    $(this).addClass('hover');
  });

  $('#dropzone').on('dragleave', function() {
    $(this).removeClass('hover');
  });

  $('#dropzone input').on('change', function(e) {
    var file = this.files[0];

    $('#dropzone').removeClass('hover');

    if (this.accept && $.inArray(file.type, this.accept.split(/, ?/)) == -1) {
      return alert('File type not allowed.');
    }

    $('#dropzone').addClass('dropped');
    $('#dropzone img').remove();

    if ((/^image\/(gif|png|jpeg|JPG)$/i).test(file.type)) {
      var reader = new FileReader(file);

      reader.readAsDataURL(file);

      reader.onload = function(e) {      
        var data = e.target.result,
            $img = $('<img />').attr('src', data).fadeIn();

        $('#dropzone div').html($img);
      };
    } else {
      var ext = file.name.split('.').pop();

      $('#dropzone div').html(ext);
    }
  });
});

Answer 1

You can write your own algorithm of exif parse, or use one of existing js libs, for example exif-js

fileToImage function(file, callback){
  if(!file || !(/^image\/(gif|png|jpeg|jpg)$/i).test(file.type)){
    callback(null);
    return;
  };
  // for modern browsers and ie from 10
  var createObjectURL = (window.URL || window.webkitURL || {}).createObjectURL || null;
  var image = new Image();
  image.onload = function(){
     // exif only for jpeg
     if(/^image\/(jpeg|jpg)$/i).test(file.type)){
        var convertExifOrienationToAngle = function (orientation) {
            var exifDegrees = [
                0, // 0 - not used
                0, // 1 - The 0th row is at the visual top of the image, and the 0th column is the visual left-hand side.
                0, // 2 - The 0th row is at the visual top of the image, and the 0th column is the visual right-hand side.
                180, // 3 - The 0th row is at the visual bottom of the image, and the 0th column is the visual right-hand side.
                0, // 4 - The 0th row is at the visual bottom of the image, and the 0th column is the visual left-hand side.
                0, // 5 - The 0th row is the visual left-hand side of the image, and the 0th column is the visual top.
                90, // 6 - The 0th row is the visual right-hand side of the image, and the 0th column is the visual top.
                0, // 7 - The 0th row is the visual right-hand side of the image, and the 0th column is the visual bottom.
                270 // 8 - The 0th row is the visual left-hand side of the image, and the 0th column is the visual bottom.
            ];
            if (orientation > 0 && orientation < 9 && exifDegrees[orientation] != 0) {
                    return exifDegrees[orientation];
                } else {
                    return 0;
            }
        };
        EXIF.getData(image, function() {
           var angle = convertExifOrienationToAngle(EXIF.getTag(image, "Orientation") || 0);
           var style = "-moz-transform: rotate(" + angle + "deg);-ms-transform: rotate(" + angle + "deg);-webkit-transform: rotate(" + angle + "deg);-o-transform: rotate(" + angle + "deg);transform: rotate(" + angle + "deg);";
           image.setAttribute("style", style);
           callback(image);
        });
     }else{
         callback(image);
     }    
  };

  image.onerror = image.onabort = function(){
    callback(null);
  };

  if(createObjectURL){
      image.src = createObjectURL(file);
  }else{
    var reader = new FileReader(file);

    reader.onload = function(e) {      
      image.src = e.target.result
    };

    reader.onerror = reader.onerror = function(){
       callback(null);
    };

    reader.readAsDataURL(file);
  } }

Example of use:

 fileToImage(file,function(image){
   if(image != null){
       document.body.appendChild(image)
   }else{
       alert("can't load image");
   }
 });

also you can use method from this post get orientation without lib