网上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个点。");
网上opencv的信息很多，但是opencv.js 资料少得可怜，在官网上找啊找，终于找到网页使用的透视变换方法：//重点坑！需要将坐标数组转为mat，并且格式为cv.CV_32FC2 let dstmat = new cv.matFromArray(4, 1, cv.CV_32FC2, dstTri);在这个坑掉了一天，终于在官网找到类似的变换属性，官网愣是没有js方面这个函数的说明。。囧 var transform=cv.getPerspectiveTran...
任何仿射变换都可以转换成，乘以一个矩阵（线性变化），再加上一个向量（平移变化）。
实际上仿射是两幅图片的变换关系。
例如我们可以通过仿射变换对图片进行：缩放、旋转、平移等操作。
一个数学问题
在解决仿射问题前，我们来做一个数学题。
如图，对于点(x1, y1)，相对于原点旋转一个角度a，...
什么是透视变换：
1、透视变换(Perspective Transformation)是将图片投影到一个新的视平面(Viewing Plane)，也称作投影映射(Projective Mapping)。
2、换算公式
u,v是原始...
一。读取图片方法。在读取图片完成后请执行：let dst = new cv.Mat()。之后所有的操作数据都会在 dst 里面
cv.matFromImageData(imgData)：imgData: canvas 通过 getImageData 获取的数据。
cv.imread(imageSource) ：imageSource可以是图片元素或canvas 元素或他们的id。
二。显示图片。
cv.imshow('canvasOutput', dst)：canvasO.
opencvjs完整的
opencvjs。（使用最新的
OpenCV 4.0.0+）
opencv.
js官方停止更新。
而且，与上一个正式版本相比，它仍然存在许多错误。
该项目继承自官方的
opencv.
js。
哪个
opencvjs完成
opencvjs。（使用最新的
OpenCV 4.0.0+）官方
opencv.
js停止了更新。
而且，与上一个正式版本相比，它仍然存在许多错误。
该项目继承自官方的
opencv.
js。
这意味着
opencv.
js中的所有方法都可以在这里工作，并且还可以修复大多数错误。
但是，性能有了很大提高。
具有由本机
JS编写的
OpenCVJS的功能，这意味着该项目可以直接在浏览器或
JS项目中使用，或者node.
js OpenCVJS最容易安装
安装 OpenCV.js 可以通过以下步骤完成：
1. 首先，从 OpenCV 官网下载最新的 OpenCV.js 文件。下载地址为：https://opencv.org/releases/
2. 将下载的 opencv.js 文件放置在您的项目目录中。
3. 在您的 HTML 文件中添加以下标记：
```html
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
这将加载 opencv.js 文件，并在文件准备好后调用 `onOpenCvReady()` 函数。
4. 在 `onOpenCvReady()` 函数中初始化 OpenCV.js：
```javascript
function onOpenCvReady() {
// 初始化 OpenCV.js
cv.onRuntimeInitialized = function() {
// 初始化完成后执行其他操作
console.log('OpenCV.js 已准备好');
在这个函数中，我们将 `cv.onRuntimeInitialized` 设置为一个函数，当 OpenCV.js 初始化完成后会调用该函数。在函数中，您可以执行其他操作。
5. 现在您已经成功安装了 OpenCV.js。您可以使用 OpenCV.js 中的函数进行图像处理和计算机视觉任务。
