OpenCV.js Helloworld

最新推荐文章于 2024-04-22 10:02:10 发布

小钢炮vv

最新推荐文章于 2024-04-22 10:02:10 发布

阅读量1.2k

点赞数 1

分类专栏： opencv.js 文章标签： opencv.js opencv

本文链接：https://blog.csdn.net/qq_36754767/article/details/91478864

版权

opencv.js 专栏收录该内容

4 篇文章 5 订阅

订阅专栏

前言

想在个人网页上做一个人脸检测的东西，之前学习了 python opencv，有了一定了解，本来查下有没有办法可以在网页上运行python 脚本的方法，但是好像都非常麻烦，而且不可取，了解到opencv有opencv.js 所以就开始学习吧，下边是 opencv.js 的hello world，在形式上与python opencv 还是很像的。

opencv.js

opencv 是没有预编译版本的opencv js文件的，需要自己下载emscripten，然后将源码C、C++文件编译为可用的 js文件，最后发现很多坑，搞不懂官方为什么不把 js 文件编译好，好在 CSDN 上找到了已经编译好的 js 文件?，如果需要的话可以自己去搜搜，挺多的，我在个人资源里面也上传了，需要的可以自行下载

https://me.csdn.net/blog/qq_36754767

Hello World

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

.inputoutput{
  float: left;
}
</style>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
  <div class="inputoutput">
    <img id="imageSrc" alt="No Image" />
    <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
  </div>
  <div  class="inputoutput">
    <canvas id="canvasOutput" ></canvas>
    <div class="caption">canvasOutput</div>
  </div>
</div>
<script type="text/javascript">
  var imgSrcElement=document.getElementById('imageSrc')
  var imginput=document.getElementById('fileInput')

  imginput.addEventListener('change',(e)=>{
    imgSrcElement.src=URL.createObjectURL(e.target.files[0])
  })

  // 因为是异步的，所以需要卸载onload 下
  imgSrcElement.onload=function(){
    // 读取获取矩阵
    let mat=cv.imread(imgSrcElement)
    // 显示
    cv.imshow('canvasOutput',mat)
    // 调用delete释放Emscripten 堆里的内存
    mat.delete()
  }


var openCVonload=function(){
  document.getElementById('status').innerHTML='opencv is ready'
}
</script>

<!-- 异步加载，不对程序进行阻塞 -->
<script async  src="opencv.js"  onload="openCVonload()" type="text/javascript"></script>
</body>
</html>

比较简单，稍微需要理解的地方，也在代码中给出了

小钢炮vv

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
OpenCV.js Helloworld

前言想在个人网页上做一个人脸检测的东西，之前学习了 python opencv，有了一定了解，本来查下有没有办法可以在网页上运行python 脚本的方法，但是好像都非常麻烦，而且不可取，了解到opencv有opencv.js 所以就开始学习吧，下边是 opencv.js 的hello world，在形式上与python opencv 还是很像的。opencv.jsopencv 是没有预编译版...
复制链接

扫一扫