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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[expo-image-picker] [iOS] Image quality degraded after crop with allowsEditing: true #8079

Closed
sstur opened this issue Apr 29, 2020 · 3 comments 路 Fixed by #9316
Closed

[expo-image-picker] [iOS] Image quality degraded after crop with allowsEditing: true #8079

sstur opened this issue Apr 29, 2020 · 3 comments 路 Fixed by #9316

Comments

@sstur
Copy link
Contributor

sstur commented Apr 29, 2020

馃悰 Bug Report

If the user selects a high resolution image, say 3000x2000px, and then crops it to square using the built-in editor (invoked with allowsEditing option), then the resulting image is dramatically reduced in quality (usually around 820x820px) instead of the expected 2000x2000px.

This appears to be a consequence of using iOS's built-in UIImagePickerController, or specifically using the UIImagePickerControllerEditedImage from UIImagePickerController.InfoKey which appears to return a lower-resolution version of the cropped image.

See relevant Expo code here.

Suggested fix:
Instead of getting the UIImagePickerControllerEditedImage we should get UIImagePickerControllerOriginalImage and UIImagePickerControllerCropRect and perform a resolution-preserving crop operation.

The other quirk I noticed is that the 1:1 aspect ratio is not always preserved. It's often off by a few pixels. If we are handling the CropRect ourself, we can control for this. Thoughts?

Environment

Expo CLI 3.19.2 environment info:
System:
OS: macOS 10.15.4
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.16.1 - /usr/local/bin/node
Yarn: 1.22.4 - node_modules/.bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5977832
Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
npmPackages:
expo: ~36.0.0 => 36.0.2
react: ~16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4
npmGlobalPackages:
expo-cli: 3.19.2

Target: iOS

Steps to Reproduce

  1. Using allowsEditing: false, open the Simulator, pick one of the sample images, log its dimensions.
  2. Using allowsEditing: true, do the same, but this time crop to square and log it's dimensions.
  3. Notice that the image has been downscaled.

Expected Behavior

The cropping should not downsample the image, if just cropping.

Actual Behavior

The image has been downsampled.

Reproducible Demo

https://snack.expo.io/@sstur/image-picker-demo

@sstur
Copy link
Contributor Author

sstur commented May 4, 2020

Thanks for triaging @byCedric. Let me know if there's anything more I can do to help make this issue more clear or actionable. Cheers!

@byCedric
Copy link
Member

byCedric commented May 4, 2020

I'm sorry, I mixed up an issue. Let me get back to you asap!

@byCedric byCedric added bug and removed Needs triage labels May 4, 2020
@byCedric
Copy link
Member

byCedric commented May 4, 2020

Hi @sstur, you are right! Thanks for the repo, can confirm this is happening on iOS only. But, I'm not sure about the fix. (cc @tsapeta)

lukmccall pushed a commit that referenced this issue Jul 24, 2020
# Why
Fixes #8079

# How
Instead of getting [`UIImagePickerControllerEditedImage`](https://developer.apple.com/documentation/uikit/uiimagepickercontrollereditedimage?language=objc) which is cropped and downsized, I take the original image and cropping rect, then crop it manually.
Based on [this thread](https://stackoverflow.com/questions/11233277/how-to-perform-square-cut-to-the-photos-in-camera-roll), however instead of rotating the cropping rect, I took advantage of already implemented `fixOrientation` and it seems to work.
Images are cropped correctly and aren't downsized anymore.

> Note: Cropped images still aren't perfect squares (dimensions often differ by a few pixels). This isn't reason for this PR

# Test Plan
Test using demo from issue. Tested portrait and landscape images, as well as rotated images.
- [x] Test on iOS Simulator
- [x] Test on real device.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants