openCVjs图像处理之手动矫正（opencv图像扭曲）

本文将带大家看看怎么用openCVjs在前端实现图片手动矫正。就像下面这样，左边是原图，右边是矫正后的图：

首先框出需要矫正的四边形区域：

得到4个顶点，从左上角开始，顺时针排列，分别是p0、p1、p2、p3。
可以得到他们的准确坐标：

p0 = [241, 60]
p1 = [763, 178]
p2 = [690, 689]
p3 = [188, 500]

矫正后的图，假设宽为width，高为height，那么矫正后的图4个顶点是：

p4 = [0, 0]
p5 = [width, 0]
p6 = [width, height]
p7 = [0, height]

其中p0~p3与p4~p7对应，我们假设宽width为408，高height为380，可以通过
cv.getPerspectiveTransform求出转换矩阵M：

const srcPoints = [241, 60, 763, 178, 690, 689, 188, 500]
const dstPoints = [0, 0, 408, 0, 408, 380, 0, 380]
const srcTri = cv.matFromArray(4, 1, cv.CV_32FC2, srcPoints)
const dstTri = cv.matFromArray(4, 1, cv.CV_32FC2, dstPoints)
const M = cv.getPerspectiveTransform(srcTri, dstTri)

求出转转矩阵后，就可以通过cv.warpPerspective进行透视矫正：

const dsize = new cv.Size(408, 380);
cv.warpPerspective(src, dst, M, dsize)
cv.imshow('canvasOutput', dst)

这样就得到了处理结果。现在我们看看简单的demo代码。
首先，初始化一个html：

    


    
Loading the Opencv ...
    
    
处理
    

        
        
    
    
    

再在上面的TODO处加入我们的逻辑代码，主要是一些事件绑定。

const imgElement = document.getElementBy('imageUpload');
const inputElement = document.getElementBy('fileInput');
const changeImageElement = document.getElement('changeImage');

inputElement.onchange = function () {
    imgElement.src = URL.createObjectURL(eventarget.files[0]);
}
changeImageElement.onclick = function () {
    // 图片处理
}
function onOpenCvReady() {
    document.getElementById('status').remove();
}

最后在上面的图片处理处加入手动矫正相关代码，点击处理按钮时执行矫正。

const src = cv.imread("imageUpload");
const dst = new cv.Mat();
const srcPoints = [241, 60, 763, 178, 690,188, 500]
const dstPoints = [0, 0, 408, 0, 408, 38380]
const srcTri = cv.matFromArray(4, 1, cv.CV_3srcPoints);
const dstTri = cv.matFromArray(4, 1, cv.CV_3dstPoints);
const M = cv.getPerspectiveTransform(srdstTri)
const dsize = new cv.Size(408, 380);
cv.warpPerspective(src, dst, M, dsize)
cv.imshow('canvasOutput', dst);
src.delete(); dst.delete();

注意：处理完不要忘记删除Mat哦

下面是原图，感兴趣的可以自己试试看。

如果喜欢opencvjs系列，请让我知道，比如点个赞~

后续有时间，可以带大家看看怎么实现上面的手动矫正框、怎么实现自动矫正等等，对opencv在前端的应用不熟悉的可以查阅前文：

《前端如何使用openCV》

《前端使用openCV处理图片的基础》

《前端使用openCV之图片处理》