Add auto-orient option via options.orientation === true.

Author: blueimp

index.html

@@ -57,10 +57,10 @@ <h2>Exif meta data</h2>
 </div>
 <br>
 <script src="js/load-image.js"></script>
-<script src="js/load-image-orientation.js"></script>
 <script src="js/load-image-meta.js"></script>
 <script src="js/load-image-exif.js"></script>
 <script src="js/load-image-exif-map.js"></script>
+<script src="js/load-image-orientation.js"></script>
 <!-- jQuery and Jcrop are not required by JavaScript Load Image, but included for the demo -->
 <script src="js/vendor/jquery.js"></script>
 <script src="js/vendor/jquery.Jcrop.js"></script>

js/demo.js

@@ -20,32 +20,7 @@ $(function () {
   var actionsNode = $('#actions')
   var currentFile
   var coordinates
-  function replaceResults (img) {
-    var content
-    if (!(img.src || img instanceof HTMLCanvasElement)) {
-      content = $('<span>Loading image file failed</span>')
-    } else {
-      content = $('<a target="_blank">').append(img)
-        .attr('download', currentFile.name)
-        .attr('href', img.src || img.toDataURL())
-    }
-    result.children().replaceWith(content)
-    if (img.getContext) {
-      actionsNode.show()
-    }
-  }
-  function displayImage (file, options) {
-    currentFile = file
-    if (!loadImage(
-        file,
-        replaceResults,
-        options
-      )) {
-      result.children().replaceWith(
-        $('<span>Your browser does not support the URL or FileReader API.</span>')
-      )
-    }
-  }
+
   function displayExifData (exif) {
     var thumbnail = exif.get('Thumbnail')
     var tags = exif.getAll()
@@ -70,6 +45,40 @@ $(function () {
     }
     exifNode.show()
   }
+
+  function updateResults (img, data) {
+    var content
+    if (!(img.src || img instanceof HTMLCanvasElement)) {
+      content = $('<span>Loading image file failed</span>')
+    } else {
+      content = $('<a target="_blank">').append(img)
+        .attr('download', currentFile.name)
+        .attr('href', img.src || img.toDataURL())
+    }
+    result.children().replaceWith(content)
+    if (img.getContext) {
+      actionsNode.show()
+    }
+    if (data && data.exif) {
+      displayExifData(data.exif)
+    }
+  }
+
+  function displayImage (file, options) {
+    currentFile = file
+    if (!loadImage(
+        file,
+        updateResults,
+        options
+      )) {
+      result.children().replaceWith(
+        $('<span>' +
+          'Your browser does not support the URL or FileReader API.' +
+          '</span>')
+      )
+    }
+  }
+
   function dropChangeHandler (e) {
     e.preventDefault()
     e = e.originalEvent
@@ -79,71 +88,75 @@ $(function () {
       maxWidth: result.width(),
       canvas: true,
       pixelRatio: window.devicePixelRatio,
-      downsamplingRatio: 0.5
+      downsamplingRatio: 0.5,
+      orientation: true
     }
     if (!file) {
       return
     }
     exifNode.hide()
     thumbNode.hide()
-    loadImage.parseMetaData(file, function (data) {
-      if (data.exif) {
-        options.orientation = data.exif.get('Orientation')
-        displayExifData(data.exif)
-      }
-      displayImage(file, options)
-    })
+    displayImage(file, options)
   }
+
   // Hide URL/FileReader API requirement message in capable browsers:
-  if (window.createObjectURL || window.URL || window.webkitURL || window.FileReader) {
+  if (window.createObjectURL || window.URL || window.webkitURL ||
+      window.FileReader) {
     result.children().hide()
   }
+
   $(document)
     .on('dragover', function (e) {
       e.preventDefault()
       e = e.originalEvent
       e.dataTransfer.dropEffect = 'copy'
     })
     .on('drop', dropChangeHandler)
-  $('#file-input').on('change', dropChangeHandler)
-  $('#edit').on('click', function (event) {
-    event.preventDefault()
-    var imgNode = result.find('img, canvas')
-    var img = imgNode[0]
-    var pixelRatio = window.devicePixelRatio || 1
-    imgNode.Jcrop({
-      setSelect: [
-        40,
-        40,
-        (img.width / pixelRatio) - 40,
-        (img.height / pixelRatio) - 40
-      ],
-      onSelect: function (coords) {
-        coordinates = coords
-      },
-      onRelease: function () {
+
+  $('#file-input')
+    .on('change', dropChangeHandler)
+
+  $('#edit')
+    .on('click', function (event) {
+      event.preventDefault()
+      var imgNode = result.find('img, canvas')
+      var img = imgNode[0]
+      var pixelRatio = window.devicePixelRatio || 1
+      imgNode.Jcrop({
+        setSelect: [
+          40,
+          40,
+          (img.width / pixelRatio) - 40,
+          (img.height / pixelRatio) - 40
+        ],
+        onSelect: function (coords) {
+          coordinates = coords
+        },
+        onRelease: function () {
+          coordinates = null
+        }
+      }).parent().on('click', function (event) {
+        event.preventDefault()
+      })
+    })
+
+  $('#crop')
+    .on('click', function (event) {
+      event.preventDefault()
+      var img = result.find('img, canvas')[0]
+      var pixelRatio = window.devicePixelRatio || 1
+      if (img && coordinates) {
+        updateResults(loadImage.scale(img, {
+          left: coordinates.x * pixelRatio,
+          top: coordinates.y * pixelRatio,
+          sourceWidth: coordinates.w * pixelRatio,
+          sourceHeight: coordinates.h * pixelRatio,
+          minWidth: result.width(),
+          maxWidth: result.width(),
+          pixelRatio: pixelRatio,
+          downsamplingRatio: 0.5
+        }))
         coordinates = null
       }
-    }).parent().on('click', function (event) {
-      event.preventDefault()
     })
-  })
-  $('#crop').on('click', function (event) {
-    event.preventDefault()
-    var img = result.find('img, canvas')[0]
-    var pixelRatio = window.devicePixelRatio || 1
-    if (img && coordinates) {
-      replaceResults(loadImage.scale(img, {
-        left: coordinates.x * pixelRatio,
-        top: coordinates.y * pixelRatio,
-        sourceWidth: coordinates.w * pixelRatio,
-        sourceHeight: coordinates.h * pixelRatio,
-        minWidth: result.width(),
-        maxWidth: result.width(),
-        pixelRatio: pixelRatio,
-        downsamplingRatio: 0.5
-      }))
-      coordinates = null
-    }
-  })
 })

js/load-image-orientation.js

@@ -26,16 +26,22 @@
   'use strict'
 
   var originalHasCanvasOption = loadImage.hasCanvasOption
+  var originalHasMetaOption = loadImage.hasMetaOption
   var originalTransformCoordinates = loadImage.transformCoordinates
   var originalGetTransformedOptions = loadImage.getTransformedOptions
 
-  // This method is used to determine if the target image
-  // should be a canvas element:
+  // Determines if the target image should be a canvas element:
   loadImage.hasCanvasOption = function (options) {
     return !!options.orientation ||
       originalHasCanvasOption.call(loadImage, options)
   }
 
+  // Determines if meta data should be loaded automatically:
+  loadImage.hasMetaOption = function (options) {
+    return options.orientation === true ||
+      originalHasMetaOption.call(loadImage, options)
+  }
+
   // Transform image orientation based on
   // the given EXIF orientation option:
   loadImage.transformCoordinates = function (canvas, options) {
@@ -97,11 +103,14 @@
 
   // Transforms coordinate and dimension options
   // based on the given orientation option:
-  loadImage.getTransformedOptions = function (img, opts) {
+  loadImage.getTransformedOptions = function (img, opts, data) {
     var options = originalGetTransformedOptions.call(loadImage, img, opts)
     var orientation = options.orientation
     var newOptions
     var i
+    if (orientation === true && data && data.exif) {
+      orientation = data.exif.get('Orientation')
+    }
     if (!orientation || orientation > 8 || orientation === 1) {
       return options
     }
@@ -111,7 +120,8 @@
         newOptions[i] = options[i]
       }
     }
-    switch (options.orientation) {
+    newOptions.orientation = orientation
+    switch (orientation) {
       case 2:
         // horizontal flip
         newOptions.left = options.right

package.json

@@ -40,7 +40,7 @@
     "lint": "standard *.js js/*.js test/*.js",
     "unit": "phantomjs node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/index.html",
     "test": "npm run lint && npm run unit",
-    "build": "cd js && uglifyjs load-image.js load-image-orientation.js load-image-meta.js load-image-exif.js load-image-exif-map.js -c -m -o load-image.all.min.js --source-map load-image.all.min.js.map",
+    "build": "cd js && uglifyjs load-image.js load-image-meta.js load-image-exif.js load-image-exif-map.js load-image-orientation.js -c -m -o load-image.all.min.js --source-map load-image.all.min.js.map",
     "preversion": "npm test",
     "version": "npm run build && git add -A js",
     "postversion": "git push --tags origin master master:gh-pages && npm publish"

test/index.html

@@ -31,10 +31,10 @@
 </script>
 <script src="vendor/canvas-to-blob.js"></script>
 <script src="../js/load-image.js"></script>
-<script src="../js/load-image-orientation.js"></script>
 <script src="../js/load-image-meta.js"></script>
 <script src="../js/load-image-exif.js"></script>
 <script src="../js/load-image-exif-map.js"></script>
+<script src="../js/load-image-orientation.js"></script>
 <script src="test.js"></script>
 <script>
 mocha.checkLeaks();

test/test.js

@@ -21,7 +21,7 @@
                     'ovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5PKsAAA7'
   var imageUrlGIF = 'data:image/gif;base64,' + b64DataGIF
   var blobGIF = canCreateBlob && window.dataURLtoBlob(imageUrlGIF)
-  // 1x2px JPEG (color white, with the Exif orientation flag set to 6):
+  // 2x1px JPEG (color white, with the Exif orientation flag set to 6):
   var b64DataJPEG = '/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAASUkqAAgAAA' +
                     'ABABIBAwABAAAABgASAAAAAAD/2wBDAAEBAQEBAQEBAQEBAQEB' +
                     'AQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ' +
@@ -438,6 +438,17 @@
         done()
       }, {orientation: 9})).to.be.ok()
     })
+
+    it('Should rotate right based on the exif orientation value', function (done) {
+      expect(loadImage(blobJPEG, function (img, data) {
+        expect(data).to.be.ok()
+        expect(data.exif).to.be.ok()
+        expect(data.exif.get('Orientation')).to.be(6)
+        expect(img.width).to.be(1)
+        expect(img.height).to.be(2)
+        done()
+      }, {orientation: true})).to.be.ok()
+    })
   })
 
   describe('Canvas', function () {