opencv.js 4点透视变换

网上opencv的信息很多，但是opencv.js 资料少得可怜，在官网上找啊找，终于找到网页使用的透视变换方法：

//重点坑！需要将坐标数组转为mat，并且格式为cv.CV_32FC2
        let dstmat = new cv.matFromArray(4, 1, cv.CV_32FC2, dstTri);
在这个坑掉了一天，终于在官网找到类似的变换属性，官网愣是没有js方面这个函数的说明。。囧

OpenCV: Geometric Transformations of Images

      

 

以供查证。

var clickTimes=0;
var srcTri = [];//保存点击点数组
var savePoint=true;//是否保存点
var src;//图片源
//获取图片
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
   imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
//异步加载图片
imgElement.onload = function() {
   src = cv.imread(imgElement);//读取图片
};

//鼠标点击选透视区域
$("#canvasInput").mouseup(function(e){
	if(srcTri.length<8){//存储4个点击坐标
	    var scrollTop = $(document).scrollTop();
		var scrollLeft = $(document).scrollLeft();
        //获取对应画布点击坐标
		var x = e.clientX + scrollLeft- $(this).offset().left,
		y = e.clientY + scrollTop- $(this).offset().top;
		markPoint(x,y,src);//标记
		cv.imshow("canvasInput",src);

		srcTri.push(x);
	    srcTri.push(y);
		
	    clickTimes++;
	    if(clickTimes==4)
	    {
			perspective(src,srcTri);
			clickTimes=0;
			
		}
	}
    return false;
});
//标记选中点
function markPoint(x,y,img){
	let point = new cv.Point(x,y);
	let color = new cv.Scalar(255, 0, 0, 255);
	cv.circle(img,point,3.5,color,6); 
}
//透视变换
function perspective(){
	if(srcTri.length==8){
		var dspoint=[src.cols,src.rows];
		var dstTri=[0,0,dspoint[0],0,0,dspoint[1],dspoint[0],dspoint[1]];

        //重点坑！需要将坐标数组转为mat，并且格式为cv.CV_32FC2
		let dstmat = new cv.matFromArray(4, 1, cv.CV_32FC2, dstTri);
		let srcmat = new cv.matFromArray(4, 1, cv.CV_32FC2, srcTri);

		var transform=cv.getPerspectiveTransform(srcmat,dstmat);//获取透视变换矩阵	
		let dsize = new cv.Size(dspoint[0],dspoint[1]);	

		var dst=new cv.Mat();
		cv.warpPerspective(src,dst,transform,dsize);  //透视变换
	    cv.imshow("canvasOutput",dst);

	}
	else alert("请选择图片，并按顺序点击图片上4个点。");
	
}