We're building a selfie straightener :) Users upload a slightly off-center selfie; we fix it's rotation so its straight.
- The users click on the middle of their nose and the middle of their eyebrows on their face within the image.
- From there we get 2 points eyebrowMiddle(x1,y1) and noseMiddle (x2,y2).
The Question
Is it possible via these 2 points to calculate how much Canvas rotation we need to have to rotate the image and make the face straight in relation to the canvas rectangle?
PS:
x1,y1 and x2,y2 are in relation to the canvas perimeter(the orange perimeter in the image) of course, not the browser window or anything else.
I'm using the line equation, for now, such as m = (x2-x1) / (y2-y1) but the result is always near 1 so I don't think we are following the right course at the moment.
We don't care if the image looks wrong in the canvas as long as the face features are parallel in relation to the bottom of the canvas (they should be looking straight).
Draw a vertical line passing through $(x_2,y_2)$ and a horizontal line passing through $(x_1,y_1)$. We want to find the angle $\theta$ between the slanted line and the vertical line. We can do this with a primary trig ratio: $$ \theta = \arctan\left( \frac{x_2 - x_1}{y_2 - y_1} \right) $$ where positive angles are considered counterclockwise and negative angles are considered clockwise.