search

hippware / rn-chat

MIT License
5 stars 0 forks source link

Research image cropping library #708

Closed southerneer closed 7 years ago

southerneer commented 7 years ago

For user image uploads we'd like them to be cropped to a consistent aspect ratio before they get sent up to the server. Similar to other apps (Instagram?, Facebook?) we'd like to present after an image upload that allows the user to specify what part of the picture appears within the bounds of any necessary cropping.

I wouldn't be surprised if there are good/mature open source React Native solutions available, just need to find them and try them out.

Talked about this with @thescurry today and writing this up more as a reminder than anything.

zavreb commented 7 years ago

@thescurry believes there are three libraries we can potentially use...one recommended is the one Twitter currently uses, we need to determine our consistent aspect ration (cc: @irfirl)

To be prioritized within a sprint soon

thescurry commented 7 years ago

@southerneer (cc: @zavreb) Eric, happy to circle up with you anytime on this one if you'd like to discuss further.

southerneer commented 7 years ago

Sounds good

zavreb commented 7 years ago

@irfirl to determine aspect ratio for image croppings (see twitter example for cropping)

thescurry commented 7 years ago

^^^ Good idea @zavreb the aspect ratio will be the first thing the dev side asks for.

irfirl commented 7 years ago

@zavreb

Twitter auto crops your images to 1:1 on your timeline, cropping the bottom of the image. Instagram has 1:1 aspect ratio and allows variable image height through a toggle. Facebook has variable image height and cropping is not a requirement.

I'd say for our app I think variable image height and adjusting the card heights to fit the image would be the best solution. If that's not possible, we could start with 1:1 and have something similar to Instagram in the future.

If we have variable image height we would need a max and min. In which case we should have a min of 15:11 aspect ratio and a max of 3:4 aspect ratio based on resolutions: (minimum: 375 x 275pt landscape image) (maximum: 375 x 500pt portrait image)

southerneer commented 7 years ago

Just discovered that there is a baked-in react-native ImageEditor component that they must have snuck in one of the recent releases. The documentation is...lacking...but the example is pretty thorough and I think I can port it for our purposes pretty easily. cc @aksonov

thescurry commented 7 years ago

I don't think we should "auto-crop", meaning we should give the user the ability to adjust/crop on their own so that the image crop is to their liking. @southerneer does the RN ImageEditor component allow for this?

zavreb commented 7 years ago

This is only the research portion, we will provide UI mocks as dictated by the research discoveries.

southerneer commented 7 years ago

@thescurry yes we'll create UI for allowing the user to adjust the crop before submitting. Demo forthcoming...

southerneer commented 7 years ago

Just demo'd the basic idea/functionality to @zavreb so the research portion is done (?).

southerneer commented 7 years ago

Found a better option today. If we switch from react-native-image-picker to react-native-image-crop-picker then we get native crop functionality with minor loss (the cropping screen doesn't look quite as nice). Will demo the example app from that repo for @thescurry, @zavreb, and @irfirl tomorrow. cc @aksonov.

zavreb commented 7 years ago

Closing this ticket since we're done w/research portion.