javascript影像處理—仿射變換深度理解_javascript技巧

前言

上一篇，我們講解了圖像金字塔，這篇文章我們來了解仿射變換。

仿射？

任何仿射變換都可以轉換成，乘以一個矩陣（線性變化），再加上一個向量（平移變化）。

其實仿射是兩張圖片的變換關係。

例如我們可以透過仿射變換對圖片進行：縮放、旋轉、平移等操作。

一個數學問題

在解決仿射問題前，我們來做一個數學題。

如圖，對於點(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滿足：

 或 

即：

複製程式碼 程式碼如下:

程式碼如下:


(__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
]; };

這樣我們就得到了一個仿射變換矩陣。
當然這個實作本身是有一定問題的，因為這個原點被固定在左上角了。

仿射變換實現

複製程式碼

程式碼如下:var warpAffine = function(__src, __rotArray, __dst){
(__src && __rotArray) || error(arguments.callee, IS_UNDEFINED_OR_NULL/* {line} */);
iftype. 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
for (j = 0, nowPix = 0; j xs = __rotArray[1] * j __rotArray[2];
ys = __rotArray[4] * j __rotArray[5];
ys = __rotArray[4] * j __rotArray[5];
ys = __rotArray[4] * j __rotArray[5];
ys = __rotArray[4] * j __rotArray[5];
ys = __rotArray[4] * j __rotArray[5];
ys = __rotArray[4] * j __rotArray[5];
ys = __rotArray[4] * j __rotArray[5];
ys = __rotArray[4] * j __rotArray[5];
ys = __rotArray[4] * j __rotArray[5]； >for(i = 0; i
if(xs > 0 && ys > 0 && xs
y = ys | 0;
x = xs | 0;

dData[nowPix] = sData[y * width x];
}else {
dData[nowPix] = 4278190080; //Black

} } } }else{ error(arguments.callee, UNSPPORT_DATA_TYPE/ ; } return dst; };
這個函數先把矩陣資料變成32位元形式，而操作每個元素就等於操作每一個像素。

然後遍歷所有元素，將對應的點賦值。

效果