Skip to content
This repository has been archived by the owner on Aug 19, 2024. It is now read-only.

RectangleCoordinates issue on iOS #77

Open
rosentoshev opened this issue Dec 1, 2020 · 5 comments
Open

RectangleCoordinates issue on iOS #77

rosentoshev opened this issue Dec 1, 2020 · 5 comments

Comments

@rosentoshev
Copy link

rosentoshev commented Dec 1, 2020

Hello,

I have an issue with the rectangleCoordinates on iOS passed down from the detectedRectangle prop. When I take a photo on Android and pass down the coordinates, it works fairly accurately as the rectangle matches the overlay. However, when I take a photo on iOS and pass it down to a component containing the react-native-perspective-image-cropper library, I have established that the detected rectangle comes out in a much smaller scale than it should be. Therefore, it aligns to the topLeft of the screen. For instance a big rectangle returns the following coordinates on iOS. In was wondering if there is an issue with the detectedRectangle coordinates on iOS and what is the best way to resolve this so that it does not come up in such a small scale and high on the y axis and to left on the x axis. Thank you.

detectedRectangle: {
bottomLeft: {y: 140.08108520507812, x: 387.81292724609375}
bottomRight: {y: 652.234375, x: 415.16131591796875}
dimensions: {width: 564, height: 1000}
topLeft: {y: 130.90045166015625, x: 30.103368759155273}
topRight: {y: 651.939453125, x: 19.704313278198242}
}
@rosentoshev
Copy link
Author

rosentoshev commented Dec 1, 2020

croppedImage on Android (fairly accurate according to the rectangle overlay):
Screenshot 2020-12-01 at 15 35 36

detectedRectangle on Android (fairly accurate as a scale and position):
Screenshot 2020-12-01 at 15 22 04

croppedImage on iOS (accurate according to the rectangle overlay):
Screenshot 2020-12-01 at 15 33 23

detectedRectangle on iOS (small as in the detectedRectangle object above and to the top left corner of the screen:
Screenshot 2020-12-01 at 15 19 10

@humphreyja
Copy link
Member

@rosenexpend first of, great work getting a perspective cropper package to work with this 🎉!! This has been a highly requested addition or recommendation for this package (and one that has caused a bit of issues for me trying to get it to work as well). So looking at this, my first thought is to multiply the coordinates by 500. I have no clue why but the other react native detection packages all scale the coordinates by 500, and the perspective cropper package is just an extraction of the same cropping function from those packages. (The original code was actually written as a gist example that someone copied into a react native package and called it "production ready" without understanding why.) So in my package I remove all the random scaling. I don't really know why it works in android and not iOS, but that is what I suspect.

Let me know if that works and if you get a fully working version of this and I'll start recommending it to people looking for this feature!

@trivmnguyen
Copy link

trivmnguyen commented Mar 29, 2021

Dear @humphreyja can you let me know more detail how to covert or fix the rectangleCoordinates in iOS. We experienced the problem as screenshot below
MicrosoftTeams-image (1)

Thank you very much in advance !

Best Regards,
Tri

@humphreyja
Copy link
Member

@trivmnguyen Ok so looking at this I am suspecting it is a screen size issue. I've seen in the past some issues when using the camera preview in full screen vs having a navigation bar and shrinking the camera preview. Basically the coordinates come back a little bit skewed. So just looking at this, I think that the perspective editor is using coordinates from the relative shape of the iPhone's full screen, where as the camera preview's image ratio is more square due to the bottom navigation.

It's pretty awful that this kind of issue exists but for the life of me I could never figure out what that was happening (I'm not a native developer by trade). My advice would be to remove the bottom nav and see if the coordinates match up. My approach is usually absolutely positioning navigation components on top of a full screen camera preview.

Let me know if that works for you

@fukemy
Copy link

fukemy commented May 18, 2022

plz update lib to using *** VNDocumentCameraViewController*** for better

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

No branches or pull requests

4 participants