paravielfalt/mastodon
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Activity Actions

Fix images resized in browser getting cropped (#7514)

Browse source 
Fix #7487
This commit is contained in:
Eugen Rochko 2018-05-16 16:24:16 +02:00 committed by GitHub
parent 4ea376121a
commit 2b97451168
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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 processImage = (img, { width, height, orientation, type = 'image/png' }) => new Promise(resolve => {
const canvas = document.createElement('canvas'); 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'); const context = canvas.getContext('2d');
switch (orientation) { switch (orientation) {
case 2: case 2: context.transform(-1, 0, 0, 1, width, 0); break;
context.translate(width, 0); case 3: context.transform(-1, 0, 0, -1, width, height); break;
break; case 4: context.transform(1, 0, 0, -1, 0, height); break;
case 3: case 5: context.transform(0, 1, 1, 0, 0, 0); break;
context.translate(width, height); case 6: context.transform(0, 1, -1, 0, height, 0); break;
break; case 7: context.transform(0, -1, -1, 0, height, width); break;
case 4: case 8: context.transform(0, -1, 1, 0, 0, width); break;
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;
} }
context.drawImage(img, 0, 0, width, height); context.drawImage(img, 0, 0, width, height);