thumbnail-generator: use new exifr.rotation() API (#2230)

* thumbnail-generator: use new exifr.rotation() API

* thumbnail-generator: remove test, outdated comment

package-lock.json

@@ -7731,7 +7731,8 @@
       "version": "file:packages/@uppy/thumbnail-generator",
       "requires": {
         "@uppy/utils": "file:packages/@uppy/utils",
-        "exifr": "^5.0.1"
+        "exifr": "^5.0.1",
+        "math-log2": "^1.0.1"
       },
       "dependencies": {
         "exifr": {
@@ -25409,6 +25410,11 @@
         "to-number-x": "^3.2.2"
       }
     },
+    "math-log2": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/math-log2/-/math-log2-1.0.1.tgz",
+      "integrity": "sha1-+4lBvl9evol55xjmJzsXjlhpRWU="
+    },
     "math-random": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",

packages/@uppy/thumbnail-generator/package.json

@@ -23,7 +23,8 @@
   },
   "dependencies": {
     "@uppy/utils": "file:../utils",
-    "exifr": "^5.0.1"
+    "exifr": "^5.0.1",
+    "math-log2": "^1.0.1"
   },
   "peerDependencies": {
     "@uppy/core": "^1.0.0"

packages/@uppy/thumbnail-generator/src/image-orientations.js

@@ -1,44 +0,0 @@
-const ORIENTATIONS = {
-  1: {
-    rotation: 0,
-    xScale: 1,
-    yScale: 1
-  },
-  2: {
-    rotation: 0,
-    xScale: -1,
-    yScale: 1
-  },
-  3: {
-    rotation: 180,
-    xScale: 1,
-    yScale: 1
-  },
-  4: {
-    rotation: 180,
-    xScale: -1,
-    yScale: 1
-  },
-  5: {
-    rotation: 90,
-    xScale: 1,
-    yScale: -1
-  },
-  6: {
-    rotation: 90,
-    xScale: 1,
-    yScale: 1
-  },
-  7: {
-    rotation: 270,
-    xScale: 1,
-    yScale: -1
-  },
-  8: {
-    rotation: 270,
-    xScale: 1,
-    yScale: 1
-  }
-}
-
-module.exports = ORIENTATIONS

packages/@uppy/thumbnail-generator/src/index.js

@@ -3,7 +3,7 @@ const Translator = require('@uppy/utils/lib/Translator')
 const dataURItoBlob = require('@uppy/utils/lib/dataURItoBlob')
 const isObjectURL = require('@uppy/utils/lib/isObjectURL')
 const isPreviewSupported = require('@uppy/utils/lib/isPreviewSupported')
-const ORIENTATIONS = require('./image-orientations')
+const MathLog2 = require('math-log2') // Polyfill for IE.
 const exifr = require('exifr/dist/mini.legacy.umd.js')
 
 /**
@@ -74,12 +74,11 @@ module.exports = class ThumbnailGenerator extends Plugin {
       })
     })
 
-    const orientationPromise = exifr.orientation(file.data).catch(_err => 1)
+    const orientationPromise = exifr.rotation(file.data).catch(_err => 1)
 
     return Promise.all([onload, orientationPromise])
-      .then(([image, rawOrientation]) => {
-        const orientation = ORIENTATIONS[rawOrientation || 1]
-        const dimensions = this.getProportionalDimensions(image, targetWidth, targetHeight, orientation.rotation)
+      .then(([image, orientation]) => {
+        const dimensions = this.getProportionalDimensions(image, targetWidth, targetHeight, orientation.deg)
         const rotatedImage = this.rotateImage(image, orientation)
         const resizedImage = this.resizeImage(rotatedImage, dimensions.width, dimensions.height)
         return this.canvasToBlob(resizedImage, 'image/png')
@@ -165,9 +164,7 @@ module.exports = class ThumbnailGenerator extends Plugin {
 
     image = this.protect(image)
 
-    // Use the Polyfill for Math.log2() since IE doesn't support log2
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log2#Polyfill
-    var steps = Math.ceil(Math.log(image.width / targetWidth) * Math.LOG2E)
+    var steps = Math.ceil(MathLog2(image.width / targetWidth))
     if (steps < 1) {
       steps = 1
     }
@@ -193,7 +190,7 @@ module.exports = class ThumbnailGenerator extends Plugin {
     var w = image.width
     var h = image.height
 
-    if (translate.rotation === 90 || translate.rotation === 270) {
+    if (translate.deg === 90 || translate.deg === 270) {
       w = image.height
       h = image.width
     }
@@ -204,8 +201,10 @@ module.exports = class ThumbnailGenerator extends Plugin {
 
     var context = canvas.getContext('2d')
     context.translate(w / 2, h / 2)
-    context.rotate(translate.rotation * Math.PI / 180)
-    context.scale(translate.xScale, translate.yScale)
+    if (translate.canvas) {
+      context.rotate(translate.rad)
+      context.scale(translate.scaleX, translate.scaleY)
+    }
     context.drawImage(image, -image.width / 2, -image.height / 2, image.width, image.height)
 
     return canvas

packages/@uppy/thumbnail-generator/src/index.test.js

@@ -520,38 +520,4 @@ describe('uploader/ThumbnailGeneratorPlugin', () => {
       expect(plugin.addToQueue).not.toHaveBeenCalled()
     })
   })
-
-  describe('rotateImage', () => {
-    it.each([
-      [0, { width: 100, height: 80 }],
-      [90, { width: 80, height: 100 }],
-      [180, { width: 100, height: 80 }],
-      [270, { width: 80, height: 100 }]])(
-      'should rotate image with %i degree', (rotation, expectedSize) => {
-        const core = new MockCore()
-        const plugin = new ThumbnailGeneratorPlugin(core)
-        const image = {
-          width: 100,
-          height: 80
-        }
-        const context = {
-          drawImage: jest.fn(),
-          translate: jest.fn(),
-          rotate: jest.fn(),
-          scale: jest.fn()
-        }
-        const canvas = {
-          width: 0,
-          height: 0,
-          getContext: jest.fn().mockReturnValue(context)
-        }
-        document.createElement = jest.fn().mockReturnValue(canvas)
-
-        const result = plugin.rotateImage(image, { rotation: rotation })
-        expect(result).toEqual({
-          ...expectedSize,
-          getContext: canvas.getContext
-        })
-      })
-  })
 })