add behavior detection to resolve #52

Author: Donaldcwl

lib/image-compression.js

@@ -5,7 +5,8 @@ import {
   followExifOrientation,
   getExifOrientation,
   getNewCanvasAndCtx,
-  handleMaxWidthOrHeight
+  handleMaxWidthOrHeight,
+  isAutoOrientationInBrowser
 } from './utils'
 
 /**
@@ -53,7 +54,7 @@ export default async function compress (file, options) {
   // exifOrientation
   options.exifOrientation = options.exifOrientation || await getExifOrientation(file)
   incProgress()
-  const orientationFixedCanvas = followExifOrientation(maxWidthOrHeightFixedCanvas, options.exifOrientation)
+  const orientationFixedCanvas = (await isAutoOrientationInBrowser) ? maxWidthOrHeightFixedCanvas : followExifOrientation(maxWidthOrHeightFixedCanvas, options.exifOrientation)
   incProgress()
 
   let quality = 1

lib/utils.js

@@ -5,6 +5,30 @@ const moduleMapper = isBrowser && window.cordova && window.cordova.require && wi
 export const CustomFile = isBrowser && ((moduleMapper && moduleMapper.getOriginalSymbol(window, 'File')) || File)
 export const CustomFileReader = isBrowser && ((moduleMapper && moduleMapper.getOriginalSymbol(window, 'FileReader')) || FileReader)
 
+// Check if browser supports automatic image orientation
+// see https://github.com/blueimp/JavaScript-Load-Image/blob/1e4df707821a0afcc11ea0720ee403b8759f3881/js/load-image-orientation.js#L37-L53
+export const isAutoOrientationInBrowser = (async () => {
+  // black 2x1 JPEG, with the following meta information set:
+  // EXIF Orientation: 6 (Rotated 90° CCW)
+  const testImageURL =
+    'data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAA' +
+    'AAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA' +
+    'QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE' +
+    'BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/x' +
+    'ABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAA' +
+    'AAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q=='
+  const testImageFile = await getFilefromDataUrl(testImageURL, 'tmp.jpg', Date.now())
+
+  const testImageCanvas = (await drawFileInCanvas(testImageFile))[1]
+  const testImageFile2 = await canvasToFile(testImageCanvas, 'image/jpeg', 'test.jpg', Date.now())
+  cleanupCanvasMemory(testImageCanvas)
+  const testImageURL2 = await getDataUrlFromFile(testImageFile2)
+  const img = await loadImage(testImageURL2)
+  // console.log('img', img.width, img.height)
+
+  return img.width === 1 && img.height === 2
+})()
+
 /**
  * getDataUrlFromFile
  *