鲁达 本文将带大家看看怎么用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：
<!DOCTYPE html> <html> <head> <title>O手动矫正demo</title> </head> <body> <h3 id="status">Loading the Opencv ...</h3> <input type="file" id="fileInput" /> <div id="changeImage">处理</div> <div class="wrap-image"> <img id="imageUpload" alt="No Image" /> <canvas id="canvasOutput"></canvas> </div> <script type="text/javascript"> // TODO </script> <script async src="j; onload="onOpenCvReady();" type="text/javascript"></script> </body> </html>再在上面的TODO处加入我们的逻辑代码，主要是一些事件绑定。
const imgElement = document.getElementBy('imageUpload'); const inputElement = document.getElementBy('fileInput'); const changeImageElement = document.getElement('changeImage'); in = function () { imgElement.src = URL.createObjectURL[0]); } c = 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); (); d();注意：处理完不要忘记删除Mat哦
下面是原图，感兴趣的可以自己试试看。
如果喜欢opencvjs系列，请让我知道，比如点个赞~
后续有时间，可以带大家看看怎么实现上面的手动矫正框、怎么实现自动矫正等等，对opencv在前端的应用不熟悉的可以查阅前文：
《前端如何使用openCV》
《前端使用openCV处理图片的基础》
《前端使用openCV之图片处理》