使用 OpenCV.js 的 JavaScript 计算机视觉入门

介绍

OpenCV,或开源计算机视觉图书馆,是一个用于图像处理和图像识别的强大的图书馆. 该图书馆有一个庞大的社区,并已被广泛用于许多领域,从面部检测到交互式艺术。它最初是在C++中建造的,但已经为不同的语言创建了连接,如Python和Java。它甚至可以在JavaScript中作为OpenCV.js使用,这就是我们将在本教程中使用的。

在这个项目中,我们将创建一个网页,用户可以上传图像以检测其中包含的所有圆圈,我们将用黑色外观突出圆圈,用户将能够下载修改的图像。

此项目的代码可在此 GitHub 复制版中找到。

前提条件

要完成本教程,您将需要拖入 OpenCV.js 库。

1https://docs.opencv.org/3.3.1/opencv.js

將此檔案當地儲存為「opencv.js」在您可以輕鬆找到的地方。

步骤1 - 设置项目

要开始,你首先需要为你的项目创建一个空间. 创建一个名为opencvjs-project的目录:

1mkdir opencvjs-project

将您的本地副本opencv.js移动到此目录。

接下来,添加一个index.html文件,使用以下模板:

 1[label index.html]
 2<!DOCTYPE html>
 3<html>
 4<head>
 5  <title>OpenCV.js</title>
 6</head>
 7<body>
 8
 9  <!-- Our HTML will go here-->
10
11  <script type="text/javascript">
12    // Our JavaScript code will go here
13  </script>
14
15</body>
16</html>

除了这个文件中现有的空的<script>标签之外,还可以添加一个新的<script>标签,该标签引用了本地的opencv.js文件。该脚本相当大,需要一些时间来加载,所以最好以无同步的方式加载。

1[label index.html]
2  <script type="text/javascript">
3    // Our JavaScript code will go here
4  </script>
5  <script async src="opencv.js" type="text/javascript"></script>

由于 OpenCV.js 由于文件大小可能不会立即准备好,我们可以通过显示内容正在加载来提供更好的用户体验,我们可以将加载旋转器添加到页面(信用到 Sampson on StackOverflow)。

首先,添加一个div元素body:

 1[label index.html]
 2<body>
 3
 4  <!-- Our HTML will go here-->
 5  <div class="modal"></div>
 6
 7  <script type="text/javascript">
 8    // Our JavaScript code will go here
 9  </script>
10  <script async src="opencv.js" type="text/javascript"></script>
11
12</body>

接下来,在 index.html 的中添加以下 CSS 到一个单独的