opencvjs getPerspectiveTransform,perspectiveTransform方法使用

OpenCV JavaScript版本,使用getPerspectiveTransform,PerspectiveTransform方法。
JavaScript和python版本不同的是Mat的创建方法不同,python会在内部自动把数据转换成Mat类,也JavaScript不会,所以刚开始没有找到JavaScript创建Mat方法,走了很多弯路。
这只是测试代码,没有使用项目中真实的数据,所有有一定的偏差。
如果有什么错误,欢迎纠正。
下面上代码:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello OpenCV.js</title>
</head>

<body>
  <h2>Hello OpenCV.js</h2>
  <h2>getPerspectiveTransform,PerspectiveTransform方法使用</h2>
  <p id="status">OpenCV.js is loading...</p>
  <div>
    <button onClick="myclick()">输出结果</button>
  </div>
  <script type="text/javascript">
    function myclick() {
      //代码 getPerspectiveTransform
      //创建数据
      let srcTri = cv.matFromArray(4, 1, cv.CV_32FC2, [56, 65, 368, 52, 28, 387, 389, 390]);
      let dstTri = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, 300, 0, 0, 300, 300, 300]);
      //转换的数据
      let M = cv.getPerspectiveTransform(srcTri, dstTri);
      console.log("getPerspectiveTransform M", M);

      //==== PerspectiveTransform ======
      //point点的数据一定要是一维的,opencv会自己去处理
      let points = [
        1, 2,
        3, 4,
        5, 6,
        7, 8
      ];
      //原数据
      points = cv.matFromArray(4,1,cv.CV_32FC2,points);
      //转换后的数据
      let points_trans = new cv.Mat();
      cv.perspectiveTransform(points, points_trans,M);
      console.log("points", points);
      console.log("points_trans", points_trans);

    }
    function onOpenCvReady() {
      document.getElementById('status').innerHTML = 'OpenCV.js is ready.';

    }
  </script>
  <script async src="https://docs.opencv.org/4.x/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
  <script src="https://docs.opencv.org/4.x/utils.js" type="text/javascript"></script>
</body>

</html>

getPerspectiveTransform结果
getPerspectiveTransform结果
perspectiveTransform结果
perspectiveTransform结果

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值