Fix images resized in browser getting cropped (#7514)

Fix #7487

diff --git a/app/javascript/mastodon/utils/resize_image.js b/app/javascript/mastodon/utils/resize_image.js
index 54459de3ecc11a4ecd93c7ef9ce50aefd8c62b71..279a858cad314ee40be3468b007adb695fb8ffae 100644 (file)
--- a/app/javascript/mastodon/utils/resize_image.js
+++ b/app/javascript/mastodon/utils/resize_image.js
@@ -44,36 +44,25 @@ const getOrientation = (img, type = 'image/png') => new Promise(resolve => {
 
 const processImage = (img, { width, height, orientation, type = 'image/png' }) => new Promise(resolve => {
   const canvas  = document.createElement('canvas');
-  [canvas.width, canvas.height] = orientation < 5 ? [width, height] : [height, width];
+
+  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.translate(width, 0);
-    break;
-  case 3:
-    context.translate(width, height);
-    break;
-  case 4:
-    context.translate(0, height);
-    break;
-  case 5:
-    context.rotate(0.5 * Math.PI);
-    context.translate(1, -1);
-    break;
-  case 6:
-    context.rotate(0.5 * Math.PI);
-    context.translate(0, -height);
-    break;
-  case 7:
-    context.rotate(0.5, Math.PI);
-    context.translate(width, -height);
-    break;
-  case 8:
-    context.rotate(-0.5, Math.PI);
-    context.translate(-width, 0);
-    break;
+  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);