-
Notifications
You must be signed in to change notification settings - Fork 2
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
Comments
@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! |
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. |
@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. |
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:
|
I'm not all that familiar with sha's, I assume these are supposed to match? |
@chriscdn Perfect, that reproduced the issue. |
Good call on dropbox modifying the file. |
Here's the area I'm looking at: jpegasus/src/services/canvasService.ts Lines 14 to 40 in 3e8440e
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 |
Keep in mind it works with other browsers so it might be a bug in Chrome. |
@chriscdn That's a really good point. |
After a little bit of research I'm guessing Chrome is fine and it's a big in my code. |
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 I'm also currently looking at https://github.com/ginpei/exif-orientation to see if he can add a feature to set orientation. |
I ended up going the route of using https://www.npmjs.com/package/@ginpei/exif-orientation . I added an 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 I also added orientation to the demo to increase visibility as to what is going on: |
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 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. |
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/.
The text was updated successfully, but these errors were encountered: