Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

orientation depends on browser #151

Open
chriscdn opened this issue Jun 23, 2020 · 17 comments
Open

orientation depends on browser #151

chriscdn opened this issue Jun 23, 2020 · 17 comments

Comments

@chriscdn
Copy link

I'm having inconsistent results when creating a thumbnail of a photo in portrait orientation. This can be demonstrated on https://tonybrobston.github.io/jpegasus-demo/.

  • take this photo as an example
  • create a thumbnail using the demo site using Chrome and Firefox
  • with Firefox the photo is correctly oriented, with chrome it's rotated.
@TonyBrobston
Copy link
Owner

@chriscdn Can you provide the version number of Chrome you're running?

I tested compression in both Chrome and Firefox, they were orientated correctly. I think it may be specific to the version of Chrome you're using. If I can reproduce the issue I'll see what I can do to fix it.

Thanks for reporting the issue!

@chriscdn
Copy link
Author

Thanks for looking into this. I just tried it again with Chrome "83.0.4103.116 (Official Build) (64-bit)" on a Mac and Windows and in both cases it's rotated. Here's a screenshot to illustrate the orientation I'm seeing.

@TonyBrobston
Copy link
Owner

TonyBrobston commented Jun 23, 2020

@chriscdn I think there's a chance that when you uploaded that image to Dropbox in your original post, Dropbox modified the image, which I think changed the exif data.

Could you try to upload the original directly into this Github issue? I think there's a chance Github may not overwrite the exif data.

It's also possible to test the original and the image uploaded to dropbox (which you'd have to download from dropbox), by using something like this: https://exifdata.com/ . If you put both images in there and there are exif differences, then it's clear that dropbox modified the image on upload.

@chriscdn
Copy link
Author

I compared the original to a copy downloaded from Dropbox and they are the same. Can you do checksum on your copy? Here's what I get:

> shasum -a 1 ~/Dropbox/Public/6438955A-A4CF-45AC-9E91-04FB848E2129.jpeg
38c903253bfeb630af1124689207384c2d710839  /Users/chris/Dropbox/Public/6438955A-A4CF-45AC-9E91-04FB848E2129.jpeg

@TonyBrobston
Copy link
Owner

@chriscdn

shasum -a 1 ~/Downloads/NCGf_xVq.jpeg
8a2065959fe0846438dfee23ad3a0549fb15732c  /Users/tonybrobston/Downloads/NCGf_xVq.jpeg

I'm not all that familiar with sha's, I assume these are supposed to match?

@chriscdn
Copy link
Author

Yes, they should match. Give the attachment a try.

6438955A-A4CF-45AC-9E91-04FB848E2129

@TonyBrobston
Copy link
Owner

@chriscdn Perfect, that reproduced the issue.

@chriscdn
Copy link
Author

Good call on dropbox modifying the file.

@TonyBrobston
Copy link
Owner

Interesting. Apparently the orientation is 6. I must be doing something wrong to convert orientation 6 to orientation 1.
image

@TonyBrobston
Copy link
Owner

Here's the area I'm looking at:

const correctExifRotation = (context: CanvasTransform, orientation: number, height: number, width: number): void => {
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;
default:
break;
}
};

I'm pretty sure I based the rotation off this post (or similar): https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images

@chriscdn
Copy link
Author

Interesting. Apparently the orientation is 6. I must be doing something wrong to convert orientation 6 to orientation 1.

Keep in mind it works with other browsers so it might be a bug in Chrome.

@TonyBrobston
Copy link
Owner

@chriscdn That's a really good point.

@TonyBrobston
Copy link
Owner

After a little bit of research I'm guessing Chrome is fine and it's a big in my code.

@TonyBrobston
Copy link
Owner

TonyBrobston commented Jun 23, 2020

Now I'm getting the impression that Chrome and Firefox implemented an autorotate feature. For example, the below image is orientation 4, but it displays as orientation 1 in Chrome (on the latest Chrome version). When I open the same image in Safari (Version 13.0.5 (15608.5.11)), it shows in orientation 4.
exifOrientationFour

I think I may just need to update the orientation in the exif data to 1 after rotating. Unfortunately I don't have the time to do that today. I probably will have time tomorrow.

@TonyBrobston
Copy link
Owner

TonyBrobston commented Jun 25, 2020

I might pull in a library that can read/write exif. I have tried to avoid importing libraries as I feel that they have a bunch of extra stuff that I won't be using, so this saves space on the client side. However, it's worth considering. This is the one I'm looking at https://www.npmjs.com/package/piexifjs.

https://bundlephobia.com/result?p=piexifjs@1.0.6
https://bundlephobia.com/result?p=jpegasus@1.12.0

I'm also currently looking at https://github.com/ginpei/exif-orientation to see if he can add a feature to set orientation.

@TonyBrobston
Copy link
Owner

TonyBrobston commented Jul 14, 2020

I ended up going the route of using https://www.npmjs.com/package/@ginpei/exif-orientation . I added an updateOrientationCode method, thinking I could consume that and all would be good.

However in the process of adding this function I learned that it's simple to update orientation if it's there and possibly more difficult to add orientation if it is not here. In the case of compressing, the file that is produced from the compression no longer has exif orientation 🤦 . So... I'll likely have to go back to the same repo and see about creating a addOrientationCode which will figure out how to add it.

I also added orientation to the demo to increase visibility as to what is going on:
image

@TonyBrobston
Copy link
Owner

TonyBrobston commented Oct 9, 2020

Just wanted to mention that I still haven't fixed this. I've been having some really wonky results with browsers like Chrome adjusting the orientation after jpegasus adjusts the orientation. It's like essentially the orientation fix occurs twice. So.. I think if we could set the orientation on the image to 1 before Chrome can mess with it, then let jpegasus do the orientation fix, then it seems like we would have a consistent solution that would work in all browsers.

At some point I'll experiment with this more. If someone else is watching this thread and wants to take a stab at it, have at it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants