How to convert the OpenCV GetPerpectiveTransform Matrix into a CSS Matrix?

Question

I have a matrix from the Python Open-CV library:

M = cv2.getPerspectiveTransform(source_points, points)

But it is completely different from the CSS Transform Matrix
Even though it has the same shape I think open-cv does some kind of other translations to x and y depending on the scale and skew of the numbers.
Example:
I have an Image in the source points (green) and the target points(orange)

With cv2.getPerspectiveTransform(source, target) I get the matrix:

array([[ 7.45735546e-01, -8.09538161e-02,  1.02930118e+01],
       [-4.69040997e-01,  8.60285055e-01,  7.66245963e+01],
       [-6.90849647e-04, -3.31231543e-04,  1.00000000e+00]])

And finally the cv2.wrapPerspective I get my image:

but if I try that same matrix with CSS transform, using the homogeneous matrix transform: matrix(0.74574, -0.46904, -0.08095, 0.86029, -88.57274000000001, -102.30782) and the same values of the cv2 matrix I get:

I tried to search for the getPerpectiveTransform algorithm but I just found examples on how to use it.
What I’m missing?

Asked By: Diego Rodea

||

Source

Answer 1

I solved it using the help of computing CSS matrix3d.
The resultant matrix is the same from the cv2.getPerspectiveTransform you must use it with transform: matrix3d and transform-origin: -left px -up px.

The left up pixels are the origin points from the upper left corner in negative as the origin is in 0,0 and you are substracting the origin corner

Answered By: Diego Rodea

How to convert the OpenCV GetPerpectiveTransform Matrix into a CSS Matrix?

Question:

Answers: