介绍
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 到一个单独的