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

Image orientation is wrong #118

Closed
yarosdev opened this issue Sep 9, 2021 · 9 comments
Closed

Image orientation is wrong #118

yarosdev opened this issue Sep 9, 2021 · 9 comments

Comments

@yarosdev
Copy link

yarosdev commented Sep 9, 2021

On iphone 11 pro max

lib vesrion 1.0.15

image

@as703
Copy link

as703 commented Sep 21, 2021

Hi,

We're also having this issue with images but have been having trouble reproducing it. Would you be able to describe more about how this image was taken? e.g. was it taken with the camera app "in-browser" or was it a photo uploaded from the library? If the latter, what aspect ratio did you use?

Any more detail you can provide would be extremely useful. We're finding that not only is the orientation wrong, the image is actually cropped and we're losing part of the image in the "black section" at the bottom.

@jmerrifield
Copy link

We're also experiencing many images ending up like the one shown above. We haven't been able to reproduce it yet, but our data suggests it's happening solely on the iphone 12 and 13.

Specifically we end up with a portrait sized image (i.e. height > width) with a black bar at the bottom, and the image content has been rotated and cropped, so we lose important parts of the image.

@rodkeys
Copy link

rodkeys commented Sep 23, 2021

The issue is also affecting iOS Safari users for the latest iOS15 update. I found that the source of the issue appears to be in lib/utils.js when using the "createImageBitmap" function shown below:

export async function drawFileInCanvas(file) {
  let img;
  try {
    img = await createImageBitmap(file);
  } catch (e) {
    const dataUrl = await getDataUrlFromFile(file);
    img = await loadImage(dataUrl);
  }
  const canvas = drawImageInCanvas(img);
  return [img, canvas];
}

As a short-term solution I commented out the "createImageBitmap" func and just started directly using the fallback "getDataUrlFromFile/loadImage" for iOS users and that appears to have fixed the issue for now.

@jmerrifield
Copy link

@rodkeys thanks for that, I'm trying your workaround and will report back! Are you able to reproduce the issue consistently? If so, and you could share an image that would reliably trigger the issue, it would be really useful.

@buesing
Copy link

buesing commented Sep 24, 2021

I'm also experiencing this on an iPhone 12 mini running iOS 15. Any image in portrait format I upload ends up looking like the image above, no matter whether it's from the cameral roll or taken directly from the camera.

@jmerrifield
Copy link

The workaround above by @rodkeys seems to have fixed the issue for us!

@Donaldcwl Donaldcwl mentioned this issue Sep 26, 2021
@Donaldcwl
Copy link
Owner

This issue is fixed in version 1.0.16.
Thanks for your contributions.

@yarosdev
Copy link
Author

Just confirming that it is fixed! Thanks

@acanturgut
Copy link

acanturgut commented Oct 10, 2021

I am using safari and latest version 1.0.16. It looks like issue still continue on safari. It works on iOS and chrome perfectly.

Screenshot 2021-10-10 at 15 51 46

job-images-v1-Xz37d5UMaCc2dJVcQAfB-original-original-0 png

@Donaldcwl Donaldcwl mentioned this issue Nov 14, 2021
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

7 participants