亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

Javascript圖像處理——仿射變換

系統 4283 0

前言

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

?

仿射?!

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

實際上仿射是兩幅圖片的變換關系。

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

?

一個數學問題

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

Javascript圖像處理——仿射變換_第1張圖片

如圖,對于點(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) || 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} 
      
      
        */
      
      
        );
    
      
      
        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 < height; 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 <
      
         height){
                    
                    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;
};
      
    

這個函數先把矩陣數據變成32位形式,操作每個元素就等同于操作每一個像素。

然后遍歷所有元素,對對應的點進行賦值。

?

效果

? Javascript圖像處理——仿射變換_第2張圖片

?

?

系列目錄

Javascript圖像處理系列

?

參考資料

Affine Transformations

Javascript圖像處理——仿射變換


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 免费一级欧美大片久久网 | 毛片女女女女女女女女女 | 最新国产一区二区精品久久 | 日本一区二区在线视频 | 国产亚洲漂亮白嫩美女在线 | 精品国产日韩久久亚洲 | 日本在线精品视频 | 四虎永久在线观看视频精品 | 伊人在线 | 伊伊综合| 精品一区二区视频 | 天海冀一二三区 | 亚洲国产精品欧美综合 | 成人久久18网站 | 久久亚洲网 | 国产性videostv另类极品 | 色久综合大榴莲 | 青青青在线视频人视频在线 | 四虎影院免费看 | 99精品视频在线观看re | 欧美激情影院 | 青青热久久国产久精品 | 最新国产午夜精品视频成人 | 欧美日本一区二区 | 国产精品福利一区二区 | 亚洲精品一区二区在线观看 | 在线亚洲欧洲国产综合444 | 国产成人香蕉在线视频fuz | 91精品成人免费国产片 | 欧美在线观看高清一二三区 | 欧美性狂猛bbbbbbxxxx | 亚洲国产精品视频 | 一级香蕉免费毛片 | 国产伊人网| 日本国产亚洲 | 97在线视频网站 | 欧美色欧美亚洲高清在线观看 | 久热精品免费视频 | 日本亚洲欧洲高清有码在线播放 | porno日本xxxxx视频 | 黄色免费网站在线观看 |