Add posibilities jasny#370: Support exif orientation

js/fileinput.js

@@ -27,6 +27,7 @@
   var Fileinput = function (element, options) {
     this.$element = $(element)
 
+    this.options = options;
     this.$input = this.$element.find(':file')
     if (this.$input.length === 0) return
 
@@ -78,6 +79,7 @@
     var file = files[0]
 
     if (this.$preview.length > 0 && (typeof file.type !== "undefined" ? file.type.match(/^image\/(gif|png|jpeg|svg\+xml)$/) : file.name.match(/\.(gif|png|jpe?g|svg)$/i)) && typeof FileReader !== "undefined") {
+      var Fileinput = this
       var reader = new FileReader()
       var preview = this.$preview
       var element = this.$element
@@ -101,6 +103,10 @@
         }
 
         preview.html($img)
+        if (Fileinput.options.exif) {
+          //Fix image tranformation if this is possible
+          Fileinput.setImageTransform($img, file);
+        }
         element.addClass('fileinput-exists').removeClass('fileinput-new')
 
         element.trigger('change.bs.fileinput', files)
@@ -124,6 +130,93 @@
     }
   },
 
+  Fileinput.prototype.setImageTransform = function($img, file) {
+      var Fileinput = this;
+      var reader = new FileReader();
+      reader.onload = function(me) {
+        var transform = false;
+        var view = new DataView(reader.result);
+        var exif = Fileinput.getImageExif(view);
+        if (exif) {
+            Fileinput.resetOrientation($img, exif);
+        }
+      }
+
+      reader.readAsArrayBuffer(file);
+  }
+
+  Fileinput.prototype.getImageExif = function(view) {
+    if (view.getUint16(0, false) != 0xFFD8) { 
+      return -2;
+    }    
+    var length = view.byteLength, offset = 2;
+    while (offset < length) {
+      var marker = view.getUint16(offset, false);
+          offset += 2;
+      if (marker == 0xFFE1) {
+        if (view.getUint32(offset += 2, false) != 0x45786966) { 
+          return -1;
+        }
+        var little = view.getUint16(offset += 6, false) == 0x4949;
+            offset += view.getUint32(offset + 4, little);
+        var tags = view.getUint16(offset, little);
+            offset += 2;
+        for (var i = 0; i < tags; i++)   {
+          if (view.getUint16(offset + (i * 12), little) == 0x0112) {
+            return view.getUint16(offset + (i * 12) + 8, little); 
+          }
+        }
+      }
+      else if ((marker & 0xFF00) != 0xFF00){
+         break;
+      } else {
+        offset += view.getUint16(offset, false);
+      } 
+    }
+
+    return -1;
+  }
+
+  Fileinput.prototype.resetOrientation = function($img, transform) {
+  var img = new Image();    
+
+  img.onload = function() {
+    var width = img.width,
+        height = img.height,
+        canvas = document.createElement('canvas'),
+        ctx = canvas.getContext("2d");
+
+    // set proper canvas dimensions before transform & export
+    if ([5,6,7,8].indexOf(transform) > -1) {
+      canvas.width = height;
+      canvas.height = width;
+    } else {
+      canvas.width = width;
+      canvas.height = height;
+    }
+    console.log(transform);
+    // transform context before drawing image
+    switch (transform) {
+      case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
+      case 3: ctx.transform(-1, 0, 0, -1, width, height ); break;
+      case 4: ctx.transform(1, 0, 0, -1, 0, height ); break;
+      case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
+      case 6: ctx.transform(0, 1, -1, 0, height , 0); break;
+      case 7: ctx.transform(0, -1, -1, 0, height , width); break;
+      case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
+      default: ctx.transform(1, 0, 0, 1, 0, 0);
+    }
+
+    // draw image
+    ctx.drawImage(img, 0, 0);
+
+    // export base64
+    $img.attr('src', canvas.toDataURL());
+  };
+
+  img.src = $img.attr('src');
+};
+
   Fileinput.prototype.clear = function(e) {
     if (e) e.preventDefault()
 
@@ -165,7 +258,7 @@
   },
 
   Fileinput.prototype.trigger = function(e) {
-    this.$input.focus().trigger('click')
+    this.$input.trigger('click')
     e.preventDefault()
   }