1 files changed, 73 insertions, 23 deletions

diff --git a/app/javascript/mastodon/utils/resize_image.js b/app/javascript/mastodon/utils/resize_image.js
index 6442eda38..279a858ca 100644
--- a/app/javascript/mastodon/utils/resize_image.js
+++ b/app/javascript/mastodon/utils/resize_image.js
@@ -1,3 +1,5 @@
+import EXIF from 'exif-js';
+
 const MAX_IMAGE_DIMENSION = 1280;
 
 const getImageUrl = inputFile => new Promise((resolve, reject) => {
@@ -28,6 +30,73 @@ const loadImage = inputFile => new Promise((resolve, reject) => {
   }).catch(reject);
 });
 
+const getOrientation = (img, type = 'image/png') => new Promise(resolve => {
+  if (type !== 'image/jpeg') {
+    resolve(1);
+    return;
+  }
+
+  EXIF.getData(img, () => {
+    const orientation = EXIF.getTag(img, 'Orientation');
+    resolve(orientation);
+  });
+});
+
+const processImage = (img, { width, height, orientation, type = 'image/png' }) => new Promise(resolve => {
+  const canvas  = document.createElement('canvas');
+
+  if (4 < orientation && orientation < 9) {
+    canvas.width  = height;
+    canvas.height = width;
+  } else {
+    canvas.width  = width;
+    canvas.height = height;
+  }
+
+  const context = canvas.getContext('2d');
+
+  switch (orientation) {
+  case 2: context.transform(-1, 0, 0, 1, width, 0); break;
+  case 3: context.transform(-1, 0, 0, -1, width, height); break;
+  case 4: context.transform(1, 0, 0, -1, 0, height); break;
+  case 5: context.transform(0, 1, 1, 0, 0, 0); break;
+  case 6: context.transform(0, 1, -1, 0, height, 0); break;
+  case 7: context.transform(0, -1, -1, 0, height, width); break;
+  case 8: context.transform(0, -1, 1, 0, 0, width); break;
+  }
+
+  context.drawImage(img, 0, 0, width, height);
+
+  canvas.toBlob(resolve, type);
+});
+
+const resizeImage = (img, type = 'image/png') => new Promise((resolve, reject) => {
+  const { width, height } = img;
+
+  let newWidth, newHeight;
+
+  if (width > height) {
+    newHeight = height * MAX_IMAGE_DIMENSION / width;
+    newWidth  = MAX_IMAGE_DIMENSION;
+  } else if (height > width) {
+    newWidth  = width * MAX_IMAGE_DIMENSION / height;
+    newHeight = MAX_IMAGE_DIMENSION;
+  } else {
+    newWidth  = MAX_IMAGE_DIMENSION;
+    newHeight = MAX_IMAGE_DIMENSION;
+  }
+
+  getOrientation(img, type)
+    .then(orientation => processImage(img, {
+      width: newWidth,
+      height: newHeight,
+      orientation,
+      type,
+    }))
+    .then(resolve)
+    .catch(reject);
+});
+
 export default inputFile => new Promise((resolve, reject) => {
   if (!inputFile.type.match(/image.*/) || inputFile.type === 'image/gif') {
     resolve(inputFile);
@@ -35,32 +104,13 @@ export default inputFile => new Promise((resolve, reject) => {
   }
 
   loadImage(inputFile).then(img => {
-    const canvas = document.createElement('canvas');
-    const { width, height } = img;
-
-    let newWidth, newHeight;
-
-    if (width < MAX_IMAGE_DIMENSION && height < MAX_IMAGE_DIMENSION) {
+    if (img.width < MAX_IMAGE_DIMENSION && img.height < MAX_IMAGE_DIMENSION) {
       resolve(inputFile);
       return;
     }
 
-    if (width > height) {
-      newHeight = height * MAX_IMAGE_DIMENSION / width;
-      newWidth  = MAX_IMAGE_DIMENSION;
-    } else if (height > width) {
-      newWidth  = width * MAX_IMAGE_DIMENSION / height;
-      newHeight = MAX_IMAGE_DIMENSION;
-    } else {
-      newWidth  = MAX_IMAGE_DIMENSION;
-      newHeight = MAX_IMAGE_DIMENSION;
-    }
-
-    canvas.width  = newWidth;
-    canvas.height = newHeight;
-
-    canvas.getContext('2d').drawImage(img, 0, 0, newWidth, newHeight);
-
-    canvas.toBlob(resolve, inputFile.type);
+    resizeImage(img, inputFile.type)
+      .then(resolve)
+      .catch(() => resolve(inputFile));
   }).catch(reject);
 });