JavaScript画像処理 - アフィン変換の深い理解_JavaScriptスキル

はじめに

前の記事 では、画像ピラミッドについて説明しました。この記事では、アフィン変換について学びます。

アフィン?

任意のアフィン変換は、行列 (線形変化) とベクトル (並進変化) に変換、乗算できます。

実際、アフィンは 2 つの画像間の変換関係です。

たとえば、アフィン変換を通じて画像に対してスケーリング、回転、平行移動などの操作を実行できます。

数学の問題

アフィン問題を解く前に、数学の問題を解いてみましょう。

図のように、点(x1,y1)は原点に対して角度aだけ回転しますが、この点はどこに行くのでしょうか？

座標系を極座標系に変更すると、点 (x1, y1) は (r, β) になり、回転すると (r, α β) になります。

デカルト座標系に戻ると、回転した点は (cos(α β) * r, sin(α β) * r) になります。

次に、式 を使用します:

cos（α β）=cosαcosβ-sinαsinβ

sin（α β）=sinαcosβ cosαsinβ

であり、元の点は (cosβ * r, sinβ * r) であるため、新しい点を (x1 * cosα - y1 * sinα, x1 *) として取得するのは簡単です。 sinaα y1 *cosα)。

そこから回転変換式 を導き出すことができます:

この場合、変換は比較的単純で、ベクトル (c, d) を追加するのと同じです。

変換行列関数の実装を取得します

通常、アフィン変換を表すには 行列を使用します。

ここで、A は回転スケーリング変換、B は平行移動変換です。この場合、結果 T は次の条件を満たします:

または

つまり:

コードをコピー コードは次のとおりです:

var getRotationArray2D = function (__angle, __x, __y){
var sin = Math.sin(__angle) || 0,
cos = Math.cos(__angle) ||
x = __x | | 0,
y = __y ||

return [cos, -sin, -x,
sin, cos, -y
]; >

このようにして、アフィン変換行列を取得します。

もちろん、原点が左上隅に固定されているため、この実装自体にはいくつかの問題があります。

アフィン変換の実装

コードをコピー コードは次のとおりです:

var warpAffine = function(__src, __rotArray, __dst){

(__src && __rotArray) || error(arguments.callee, IS_UNDEFINED_OR_NULL/* {line} */); __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 < height; j ){
xs = __rotArray[1] * j __rotArray[2]
ys = __rotArray[4] * j __rotArray[5] ;
for(i = 0; i
if(xs > 0 && ys > 0 && xs < 幅 && ys < 高さ){

x = xs 0; x] ;
}else{
dData[nowPix] = 4278190080 //黒
}
}
} else{
error(arguments.callee, UNSPPORT_DATA_TYPE; /* {line} */);
}
戻り値
};


この関数はまず行列データを 32 ビット形式に変換し、各要素を操作することは各ピクセルを操作することに相当します。

次に、すべての要素を走査し、対応する点に値を割り当てます。

効果