Javascript Image Processing-deep understanding of affine transformation-javascript skills

In the previous article, we explained the image pyramid. In this article, we are going to understand the affine transform and affine? Any affine transformation can be converted to, multiplied by a matrix (linear change), plus a vector (translation change). Next we will introduce it in detail. Interested friends can understand it. Preface

In the previous article, we explained the image pyramid. In this article, we will learn about the affine transform.

Affine?

Any affine transformation can be converted to, multiplied by a matrix (linear change), plus a vector (translation change ).

In fact, affine is the transformation relationship between two images.

For example, you can perform scaling, rotation, and translation operations on an image through an affine transform.

A mathematical question

Before solving the affine problem, let's do a math problem.

For a point (x1, y1) that rotates an angle a relative to the origin, where is the point?

When we change the coordinate system to the polar coordinate system, the point (x1, y1) is changed to (r,Beta), and after rotation, it becomes (r,α +Beta ).

To the Cartesian coordinate system, the point after rotation is changed to (cos (α +Beta) * r, sin (α +Beta) * r ).

Then use the formula:

Cos (α + β) = cos α cos β-sin α sin β

Sin (α + β) = sin α cos β + cos α sin β

And the original vertex is (cos β * r, sin β* R), so it is easy to obtain a new vertex (x1 * cosα-y1 * sinα, x1 * sina α + y1 * cos α ).

We can export the Rotation Transformation Formula from it.:

Translation is much simpler, just like adding a vector (c, d.

Implement Transformation Matrix Functions

We usually use a matrix to represent the affine transformation.

Here, A is the rotation and scaling transformation, and B is the translation transformation. The result T is satisfied:

Or

That is:

The Code is as follows:

Var getRotationArray2D = function (_ angle, _ x, _ y ){
Var sin = Math. sin (_ angle) | 0,
Cos = Math. cos (_ angle) | 1,
X = _ x | 0,
Y = _ y | 0;

Return [cos,-sin,-x,
Sin, cos,-y
];
};

In this way, we get an affine transformation matrix.

Of course, this implementation is problematic because the origin point is fixed in the upper left corner.

Affine Transformation implementation

The Code is as follows:

Var warpAffine = function (_ src, _ rotArray, _ dst ){
(_ Src & _ rotArray) | error (arguments. callee, IS_UNDEFINED_OR_NULL/* {line }*/);
If (_ src. type & _ src. type = "CV_RGBA "){
Var height = _ src. row,
Width = _ src. col,
Dst = _ dst | new Mat (height, width, CV_RGBA ),
SData = new Uint32Array (_ src. buffer ),
DData = new Uint32Array (dst. buffer );

Var I, j, xs, ys, x, y, nowPix;

For (j = 0, nowPix = 0; j Xs = _ rotArray [1] * j + _ rotArray [2];
Ys = _ rotArray [4] * j + _ rotArray [5];
For (I = 0; I <width; I ++, nowPix ++, xs + = _ rotArray [0], ys + = _ rotArray [3]) {

If (xs> 0 & ys> 0 & xs <width & ys
Y = ys | 0;
X = xs | 0;

DData [nowPix] = sData [y * width + x];
} Else {
DData [nowPix] = 4278190080; // Black
}
}
}
} Else {
Error (arguments. callee, UNSPPORT_DATA_TYPE/* {line }*/);
}
Return dst;
};

This function first converts the matrix data into a 32-bit format. Operations on each element are equivalent to operations on each pixel.

Traverse all elements and assign values to corresponding points.

Effect