opencv 计算机视觉_使用OpenCV.jsJavaScript中的计算机视觉简介

最新推荐文章于 2023-07-31 19:27:06 发布

culiu9261

最新推荐文章于 2023-07-31 19:27:06 发布

阅读量786

点赞数

文章标签： css js javascript python html ViewUI

原文链接：https://scotch.io/tutorials/introduction-to-computer-vision-in-javascript-using-opencvjs

版权

opencv 计算机视觉

OpenCV is a powerful library used for image processing and image recognition. The library, Open-Source Computer Vision, has a massive community and has been used extensively in many fields, from face detection to interactive art. It was first built in C++ but bindings have since been created for different languages, such as Python and Java. It is even available in JavaScript (OpenCV.js), which is what we'll be using for this tutorial.

OpenCV是一个功能强大的库，用于图像处理和图像识别。该库名为“开放源代码计算机视觉”，具有庞大的社区，并在从人脸检测到交互艺术的许多领域中得到广泛使用。它最初是用C ++构建的，但是此后已经为不同的语言（例如Python和Java）创建了绑定。它甚至可以在JavaScript（OpenCV.js）中使用，这就是本教程将使用的内容。

In this project, we will create a simple webpage where a user can upload an image in order to detect all the circles contained in it. We will highlight them with a black outline and the user will be able download the modified image. Thanks to OpenCV.js, this is a very easy task.

在这个项目中，我们将创建一个简单的网页，用户可以在其中上传图片以检测其中包含的所有圆圈。我们将用黑色轮廓突出显示它们，用户将能够下载修改后的图像。感谢OpenCV.js，这是一个非常简单的任务。

Throughout this tutorial, I won't discuss much about styling the page so feel free to add your own. Here is my Github repo with all the code in this post, plus my own styling using Bootstrap CSS.

在本教程中，我不会讨论太多有关样式页面的内容，因此可以随意添加自己的样式。这是我的Github存储库，其中包含本文中的所有代码，以及我自己使用Bootstrap CSS的样式。

建立 ( Set up )

Create a folder opencvjs-project and add an index.html file with the following basic template.

创建一个文件夹opencvjs-project并使用以下基本模板添加index.html文件。

<!DOCTYPE html>
<html>
<head>
    <title>OpenCV.js</title>
</head>
<body>
    <!-- Our HTML will go here-->

<script type="text/javascript">
    // Our JavaScript code will go here
</script>

</body>
</html>

We will need to pull in the OpenCV.js library. The latest version can be built following the instructions found here, or you can copy the file for v3.3.1 from here (directly from the official OpenCV website) and save it locally as opencv.js. Add a script tag to the index.html file which references the local 'opencv.js' file. The script is quite large and takes a bit of time to load, so it is better load it asynchronously. This can be done by adding async to the script tag:

我们将需要引入OpenCV.js库。可以按照此处的说明构建最新版本，也可以从此处（直接从OpenCV官方网站直接）复制v3.3.1的文件，然后将其另存为opencv.js 。在引用本地“ opencv.js”文件的index.html文件中添加脚本标签。该脚本非常大，需要花费一些时间来加载，因此最好以异步方式加载它。可以通过向script标签添加async来完成：

<script async src="opencv.js" type="text/javascript"></script>

As OpenCV.js won't be ready immediately, we can provide a better user experience by showing that the content is being loaded. I decided to add a loading spinner to my page (credit to Sampson), though you may prefer something else. In brief, I added a div tag at the bottom of the body and the following CSS into a separate style tag at the top of the page. The spinner is invisible by default (thanks to display: none;):

由于OpenCV.js不会立即准备就绪，因此我们可以通过显示内容正在加载来提供更好的用户体验。我决定在页面上添加一个加载微调器（归功于Sampson ），尽管您可能更喜欢其他东西。简而言之，我在正文底部添加了div标签，并将以下CSS添加到了页面顶部的单独样式标签中。默认情况下微调器是不可见的（感谢display: none; ）：

<body>
...
<div class="modal"></div>
<body>

/* display loading gif and hide webpage */
.modal {
     
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* prevent scrollbar from display during load */
body.loading {
     
    overflow: hidden;   
}

/* display the modal when loading class is added to body */
body.loading .modal {
     
    display: block;
}

To show the loading gif, we can add "loading" class to the body. Add the following to the top of the empty script.

为了显示加载的gif，我们可以在正文中添加"loading"类。将以下内容添加到空脚本的顶部。

document.body.classList.add("loading");

When Opencv.js loads, we'll want to hide the

最低0.47元/天解锁文章

culiu9261

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
opencv 计算机视觉_使用OpenCV.jsJavaScript中的计算机视觉简介

opencv 计算机视觉OpenCV is a powerful library used for image processing and image recognition. The library, Open-Source Computer Vision, has a massive community and has been used extensively in many fields...
复制链接

扫一扫