Support automatic browser image orientation.

Resolves blueimp#97
See also: w3c/csswg-drafts#4666

Author: blueimp

README.md

@@ -228,8 +228,11 @@ The optional third argument to **loadImage()** is a map of options:
   When set to `true`, it will set the orientation value based on the EXIF data
   of the image, which will be parsed automatically if the exif library is
   available.  
-  Setting the `orientation` also enables the `canvas` option.  
-  Setting `orientation` to `true` also enables the `meta` option.
+  Setting `orientation` to an integer in the range of `2` to `8` enables the
+  `canvas` option.  
+  Setting `orientation` to `true` enables the `canvas` and `meta` options,
+  unless the browser supports automatic image orientation (see
+  [browser support for image-orientation](https://caniuse.com/#feat=css-image-orientation)).
 - **meta**: Automatically parses the image meta data if set to `true`.  
   The meta data is passed to the callback as part of the second argument.  
   If the file is given as URL and the browser supports the

js/load-image-orientation.js

@@ -34,17 +34,37 @@
   var originalTransformCoordinates = loadImage.transformCoordinates
   var originalGetTransformedOptions = loadImage.getTransformedOptions
 
+  ;(function () {
+    // black 2x1 JPEG, with the following meta information set:
+    // - EXIF Orientation: 6 (Rotated 90° CCW)
+    var testImageURL =
+      'data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAA' +
+      'AAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA' +
+      'QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE' +
+      'BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/x' +
+      'ABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAA' +
+      'AAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q=='
+    var img = document.createElement('img')
+    img.onload = function () {
+      // Check if browser supports automatic image orientation:
+      loadImage.orientation = img.width === 1 && img.height === 2
+    }
+    img.src = testImageURL
+  })()
+
   // Determines if the target image should be a canvas element:
   loadImage.hasCanvasOption = function (options) {
     return (
-      !!options.orientation || originalHasCanvasOption.call(loadImage, options)
+      (!!options.orientation === true && !loadImage.orientation) ||
+      (options.orientation > 1 && options.orientation < 9) ||
+      originalHasCanvasOption.call(loadImage, options)
     )
   }
 
   // Determines if meta data should be loaded automatically:
   loadImage.hasMetaOption = function (options) {
     return (
-      (options && options.orientation === true) ||
+      (options && options.orientation === true && !loadImage.orientation) ||
       originalHasMetaOption.call(loadImage, options)
     )
   }
@@ -115,8 +135,12 @@
     var orientation = options.orientation
     var newOptions
     var i
-    if (orientation === true && data && data.exif) {
-      orientation = data.exif.get('Orientation')
+    if (orientation === true) {
+      if (loadImage.orientation) {
+        // Browser supports automatic image orientation
+        return options
+      }
+      orientation = data && data.exif && data.exif.get('Orientation')
     }
     if (!(orientation > 1 && orientation < 9)) {
       return options

test/test.js

@@ -877,7 +877,7 @@
             expect(imageData[3 + 20]).to.equal(255)
             done()
           },
-          { orientation: true }
+          { orientation: true, meta: true, canvas: true }
         )
       ).to.be.ok
     })
@@ -895,6 +895,27 @@
         )
       ).to.be.ok
     })
+
+    describe('from-image', function () {
+      if (!loadImage.orientation) return
+
+      it('Should use automatic browser image orientation', function (done) {
+        expect(
+          loadImage(
+            blobJPEG,
+            function (img, data) {
+              expect(data).to.be.ok
+              expect(data.exif).to.be.undefined
+              expect(img.getContext).to.be.undefined
+              expect(img.width).to.equal(2)
+              expect(img.height).to.equal(3)
+              done()
+            },
+            { orientation: true }
+          )
+        ).to.be.ok
+      })
+    })
   })
 
   describe('Canvas', function () {