OpenCV.js Helloworld

前言

想在个人网页上做一个人脸检测的东西,之前学习了 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>

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

你可能感兴趣的:(前端文章,opencv.js)