about summary refs log tree commit diff
path: root/app/javascript
diff options
context:
space:
mode:
authorEugen Rochko <eugen@zeonfederated.com>2018-05-16 16:24:16 +0200
committerGitHub <noreply@github.com>2018-05-16 16:24:16 +0200
commit2b97451168575f4773d8a802f9b1b7394d18a307 (patch)
treea2bef7eec59a02722847ae07e813b0bc773029b1 /app/javascript
parent4ea376121a814816fe62c003ac27fb2295650a4a (diff)
Fix images resized in browser getting cropped (#7514)
Fix #7487
Diffstat (limited to 'app/javascript')
-rw-r--r--app/javascript/mastodon/utils/resize_image.js41
1 files changed, 15 insertions, 26 deletions
diff --git a/app/javascript/mastodon/utils/resize_image.js b/app/javascript/mastodon/utils/resize_image.js
index 54459de3e..279a858ca 100644
--- 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);