OpenCV.js介绍与win10下OpenCV.js快速安装教程

opencv.js介绍

引用一下官方的解释:
OpenCV.js是用于Web平台的OpenCV功能的选定子集的JavaScript绑定。它允许新兴的具有多媒体处理功能的Web应用程序受益于OpenCV提供的各种视觉功能。OpenCV.js利用Emscripten将OpenCV函数编译为asm.js或WebAssembly目标,并为Web应用程序提供了JavaScript API来访问它们。该库的未来版本将利用Web上可用的加速API,例如SIMD和多线程执行。

个人理解就是
OpenCV.js主要运用于网页前端,比较适合做图像视频的交互式处理,以前自己在实验课上写的OpenCV和Python-OpenCV大多是后端式的,黑框输入黑框输出。

官方网站

网上关于OpenCV.js的教程比较少,因此官网还是一个比较好的学习平台,上面有一些基础的例子,方便你快速理解。

https://docs.opencv.org/3.3.1/d5/d10/tutorial_js_root.html

OpenCV.js介绍与win10下OpenCV.js快速安装教程_第1张图片

快速安装教程

网上看到大多数教程都比较繁琐,大多是安装OpenCV——>安装Emscripten——>编译OpenCV.js。实际上就是把C++版本的OpenCV编译成JavaScript版本而已,所以其实可以直接用别人编译好的OpenCV.js。

1、下载已编译好的OpenCV.js

这个非常感谢这位博主提供的编译好的OpenCV.js

下载地址:
https://pan.baidu.com/s/1ZMkhcPw31hmW9qOeeOr7fQ 密码:r5wh

知乎原文:
https://zhuanlan.zhihu.com/p/50428738

2、配置OpenCV.js

将上述下载好的三个文件:opencv.js、opencv_js.js、opencv_js.wasm放入自己项目的的js文件下。

OpenCV.js介绍与win10下OpenCV.js快速安装教程_第2张图片

3、测试一下

利用官方提供的代码,实验一下是否配置成功,其中要注意引用时路径不要出错,我的是src="/static/client/js/opencv.js"。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</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">
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() {
  let mat = cv.imread(imgElement);
  cv.imshow('canvasOutput', mat);
  mat.delete();
};
function onOpenCvReady() {
  document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<script async src="/static/client/js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>

如果能正确成功运行,效果是这样的。如果红框处显示的是OpenCV.js is loading…,说明你路径有问题,没有正确导入。

OpenCV.js介绍与win10下OpenCV.js快速安装教程_第3张图片

你可能感兴趣的:(opencv.js,opencv,javascript)