treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Fix images resized in browser getting cropped (#7514) 

Fix #7487
lolsob-rspec
Eugen Rochko 2018-05-16 16:24:16 +02:00 committed by GitHub
parent f98e09bfaf
commit 8adcc1d806
1 changed files with 15 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/javascript/mastodon/utils/resize_image.js
View File

@ -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);