透視變換簡析

 

開篇注：博客是為了更好的思考，希望能以此記錄自己的學習歷程。隨着時間流逝，可能有些內容已經失效，望讀者望文觀義，get到關鍵點。假如對文中有啥有疑問、有想法、感覺不太對的地方歡迎留言交流~。

引言

大學時就感覺OpenCV挺有意思，比如里面的透視變換，通過四個點就可以計算一張二維圖和另外一張二維圖之間的映射關系，后續通過映射關系就可以將兩者之中任意一個圖中的元素映射到另外一個圖。很遺憾工作后才開始了解其原理。

正文

我是從博客入手學習的，CSDN博主 小魏的修行路 的 兩篇博文給了我很大啟發，很感謝。兩篇博文鏈接如下：
https://blog.csdn.net/xiaowei_cqu/article/details/26471527
https://blog.csdn.net/xiaowei_cqu/article/details/26478135

1、捋博文的內容

參照 https://blog.csdn.net/xiaowei_cqu/article/details/26471527 這篇文章，我先按照博主的思路，將四邊形A變換為四邊形B的過程變成： 四邊形A先到單位正方形的變換，然后加上單位正方形到四邊形B的變換兩個階段。這里就手推（看這字，妥妥手推的(逃. ）一下單位正方形到四邊形變換的過程：


小魏的代碼實現就是想要求四邊形A變換為四邊形B，先求四邊形A到單位方形的變換矩陣$H^1$，再求單位方形到四邊形B的變換矩陣$H^2$，那么四邊形A到四邊形B的變換矩陣$H$就等於 $H^1\ast H^2$。
因為已經推導出了方形到四邊形的透視變換矩陣計算公式，所以具體在求四邊形A到方形的透視變換矩陣時，先求單位方形到四邊形A轉換的矩陣$F$，那么$H^1=F^{-1}$，利用矩陣公式$F^{\ast }=F^{-1}\ast |F|$，推得$H^1=\genfrac{}{}{0ex}{}{F^{\ast }}{|F|}$。

我們再來回顧一下，已知四邊形A到四邊形B的透視變換矩陣$H$，求四邊形A中某點（$x,y$）在四邊形B中對應的點（$x^{{}^{\prime }},y^{{}^{\prime }}$)：
$$x^{{}^{\prime }}=\genfrac{}{}{0ex}{}{C^{11}\ast x+C^{21}\ast y+C^{31}}{C^{13}\ast x+C^{23}\ast y+C^{33}};$$$$y^{{}^{\prime }}=\genfrac{}{}{0ex}{}{C^{12}\ast x+C^{22}\ast y+C^{32}}{C^{13}\ast x+C^{23}\ast y+C^{33}}$$
透視變換矩陣$H$乘以非0系數對以上對應點的推導沒有影響。

那么，簡單起見，我們就令$H^1=F^{\ast }$。
綜上所述就是對小魏博客中透視變換部分的推導與分析。

2、進一步思考

現在我有一個255 * 255 * 24（位深）圖片：

我想讓它變換到一張600 * 500 *24的圖上，位置（默認坐標為(x, y)形式）為：
（117, 31） // top left
（420, 25） // top right
（120, 218） // bottom left
（418, 450） // bottom right

我們創建一個 600 * 500 * 24黑色背景的圖片，同時規定求的是圖A到圖B的透視變換矩陣$H$。這種前提下，我們求得的透視變換矩陣$H$是圖A到圖B的映射，圖A中像素（坐標）都可以映射到圖B中，但是圖B中不是每個點都與圖A中的點有映射關系。所以會出現啥結果呢？接下來根據誰是圖A誰是圖B進一步討論。

（1）我們設255 * 255的圖為圖A，設600 * 500的圖為圖B

這種情況下，因為600 * 500 * 24的圖是我們的目標圖同時又是圖B，所以在生成的目標圖中會有部分像素（坐標）因為與圖A中沒有映射關系而呈現背景色：

圖B中與圖A中沒有建立映射關系的點顯示為背景色（黑色）。

（2）我們設255 * 255的圖為圖B，設600 * 500的圖為圖A

這種情況下，因為600 * 500 * 24的圖是我們的目標圖同時又是圖A，所以在生成的目標圖中所有像素（坐標）都與圖A中有映射關系（映射后的坐標為負值的后期過濾掉即可，不過這也算是有映射）。所以生成的600 * 500 * 24的目標圖見下方：

（3）不管設置誰為圖A圖B，該插值插值

通過后期插值操作，這樣怎么也不會出現（1）中情況了。

（4）小總結

我是建議把已知的圖像作為圖B， 待操作圖/目標圖作為圖A，這樣也不用后續的插值操作。同理，OpenCV里面的cv::getPerspectiveTransform() 和 cv::perspectiveTransform()函數使用時也要考慮這種情況，免得透視變換后的圖中出現（1）中情況不知所措。

結尾

結尾，附上兩個測試樣例，一個是調用OpenCV的透視變換函數實現透視變換，一個是調用小魏的PerspectiveTransform類實現透視變換，這兩個例子都很好修改來驗證博文的內容，大家可以更換圖A圖B的設定來看看生成的目標圖的變化：

//  調用OpenCV的透視變換函數的樣例
#include <opencv2/highgui/highgui.hpp> 
#include <opencv2/imgproc/imgproc.hpp>

using namespace cv;

int main()
{
    // 目標圖/待操作圖
    Mat dstImg = Mat::zeros(500, 600, CV_8UC3);
    Mat srcImg = imread("E:/test.jpg");

    // 透視變換前的圖  對應博文中的圖A
    Mat beforeTransformImg = dstImg;
    int nBeforeTransHeight = beforeTransformImg.rows;
    int nBeforeTransWidth = beforeTransformImg.cols;
    // 透視變換后的圖  對應博文中的圖B
    Mat afterTransformImg = srcImg;
    int nAfterTransHeight = afterTransformImg.rows;
    int nAfterTransWidth = afterTransformImg.cols;

    vector<Point2f> corners(4);
    corners[0] = Point2f(117, 31);
    corners[1] = Point2f(420, 25);
    corners[2] = Point2f(120, 218);
    corners[3] = Point2f(418, 450);

    vector<Point2f> corners_trans(4);
    corners_trans[0] = Point2f(0, 0);
    corners_trans[1] = Point2f(nAfterTransWidth - 1, 0);
    corners_trans[2] = Point2f(0, nAfterTransHeight - 1);
    corners_trans[3] = Point2f(nAfterTransWidth - 1, nAfterTransHeight - 1);

    Mat transform = getPerspectiveTransform(corners, corners_trans);
    vector<Point2f> ponits, points_trans;
    for (int cy = 0; cy < nBeforeTransHeight; cy++) 
    {
        for (int cx = 0; cx < nBeforeTransWidth; cx++) 
        {
            ponits.push_back(Point2f(cx, cy));
        }
    }
    perspectiveTransform(ponits, points_trans, transform);

    int count = 0;
    for (int cy = 0; cy < nBeforeTransHeight; cy++)
    {
        uchar* t = beforeTransformImg.ptr<uchar>(cy);
        for (int cx = 0; cx < nBeforeTransWidth; cx++)
        {
            int y = points_trans[count].y;
            int x = points_trans[count].x;
            count++;

            if (x<0 || x > (nAfterTransWidth - 1) || y < 0 || y > (nAfterTransHeight - 1))
                continue;
            uchar* p = afterTransformImg.ptr<uchar>(y);
            t[cx * 3] = p[x * 3];
            t[cx * 3 + 1] = p[x * 3 + 1];
            t[cx * 3 + 2] = p[x * 3 + 2];
        }
    }
    imwrite("E:/trans2.jpg", dstImg);

    return 0;
}

 

//  調用小魏PerspectiveTransform類進行透視變換的樣例
#include "PerspectiveTransform.h"
#include <opencv2/highgui/highgui.hpp> 
#include <opencv2/imgproc/imgproc.hpp>

using namespace cv;

int main() 
{
    // 目標圖/待操作圖
    Mat dstImg = Mat::zeros(500, 600, CV_8UC3);
    Mat srcImg = imread("E:/test.jpg");
    
    // 透視變換前的圖  對應博文中的圖A
    Mat beforeTransformImg = dstImg;
    int nBeforeTransHeight = beforeTransformImg.rows;
    int nBeforeTransWidth = beforeTransformImg.cols;
    // 透視變換后的圖  對應博文中的圖B
    Mat afterTransformImg = srcImg;
    int nAfterTransHeight = afterTransformImg.rows;
    int nAfterTransWidth = afterTransformImg.cols;

    PerspectiveTransform tansform = PerspectiveTransform::quadrilateralToQuadrilateral(
        117, 31,  //top left
        420, 25,  //top right
        120, 218,  //bottom left
        418, 450,
        0, 0,  //top left
        nAfterTransHeight - 1, 0,  //top right
        0, nAfterTransWidth - 1,  //bottom left
        nAfterTransHeight - 1, nAfterTransWidth - 1
        );

    vector<float> ponits;
    for (int cy = 0; cy < nBeforeTransHeight; cy++) 
    {
        for (int cx = 0; cx < nBeforeTransWidth; cx++) 
        {
            ponits.push_back(cx);
            ponits.push_back(cy);
        }
    }
    tansform.transformPoints(ponits);

    for (int cy = 0; cy < nBeforeTransHeight; cy++) {
        uchar*  t = beforeTransformImg.ptr<uchar>(cy);
        for (int cx = 0; cx < nBeforeTransWidth; cx++) {
            int tmp = cy * nBeforeTransWidth + cx;
            int x = ponits[tmp * 2];
            int y = ponits[tmp * 2 + 1];
            if (x < 0 || x > (nAfterTransWidth - 1) || y < 0 || y > (nAfterTransHeight - 1))
                continue;
            uchar* p = afterTransformImg.ptr<uchar>(y);
            t[cx * 3] = p[x * 3];
            t[cx * 3 + 1] = p[x * 3 + 1];
            t[cx * 3 + 2] = p[x * 3 + 2];
        }
    }
    imwrite("E:/trans.jpg", dstImg);

    return 0;
}