Вступление

  • OpenCv - это библиотека с открытым исходным кодом для обработки изображений, компьютерного зрения и машинного обучения.
  • OpenCv был создан в Intel в 1999 году Гэри Брадски.
  • OpenCv поддерживает разные языки программирования, такие как python, c ++, Java, JavaScript и т. Д.
  • OpenCv также доступен на разных платформах, включая Linux, Windows, Mac, Android, iOS и т. Д.
  • Используя OpenCv, мы можем разрабатывать различные алгоритмы для обнаружения лиц, отслеживания объектов, распознавания объектов, распознавания рукописного ввода и т. Д.

OpenCv-js

  • OpenCv.js помогает нам использовать OpenCv непосредственно в сети.
  • OpenCv.js помогает веб-сообществу взаимодействовать с компьютерным зрением и разрабатывает алгоритмы на основе компьютерного зрения для веб-сайтов.
  • OpenCv.js запускается непосредственно в браузере, поэтому вы можете видеть результаты в режиме реального времени.
  • Нет необходимости в каком-либо специальном сервере для развертывания.

Предварительное условие

Вам необходимо знать:

  • JavaScript
  • Разработка веб-приложений

Архитектура проекта:

Как использовать OpenCv в JavaScript?

Чтобы использовать opencv.js, нам нужна IDE, в которой мы создаем веб-страницы и пишем код javascript. Я использую Sublime Text 3.

Шаг 1:
Первым шагом является загрузка Opencv.js по ссылке: https://docs.opencv.org/3.4.0/opencv.js при открытии этого по ссылке вы можете увидеть следующий текст в новой вкладке:

Вы можете просто выделить все, используя Ctrl + A, и скопировать весь текст, используя Ctrl + C. Откройте Блокнот ++ и создайте новый файл, вставьте весь скопированный текст в файл и сохраните файл как файл javascript.

Шаг 2:
На шаге 2 создайте простую HTML-страницу.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Tutorial-2</title>
</head>
<body>
</body>
</html>

Шаг 3:
Создайте тег h2 внутри тега body и назначьте идентификатор тегу h2 для отображения сообщения на веб-странице независимо от того, готов opencv.js к использованию или нет.

<h2 id="checker" style="color: green;">OpenCv is loading.....</h2>

Шаг 4:
Создайте имя функции javascript «opencvcheck» внутри тега сценария, чтобы получить элемент по идентификатору из тега html и назначить текст «Opencv.js is Ready». если функция успешно запущена, и имейте в виду, что тег определения функции всегда предшествует загрузке тега opencv.js, иначе он не сможет найти функцию и сгенерировать ошибку, которую функция не определяет.

<script type="text/javascript">
 function opencvcheck() {
  document.getElementById('checker').innerHTML="Opencv is Ready."
 }
</script>

Шаг 5.
Загрузите OpenCv.js в браузер. Во время загрузки opencv.js я использую асинхронную функцию, чтобы проверить, загружен ли файл .js или нет.

<script async src="js/opencv.js" onload="opencvcheck()" type="text/javascript"></script>

Шаг 6.
Запустите HTML-файл. Вы можете увидеть следующий результат:

Весь код (index.html):

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Tutorial-2</title>
</head>
<script type="text/javascript">
 function opencvcheck() {
  document.getElementById('checker').innerHTML="Opencv is Ready."
 }
</script>
<script async src="js/opencv.js" onload="opencvcheck()" type="text/javascript"></script>
<body>
 <h2 id="checker" style="color: green;">OpenCv is loading.....</h2>
</body>
</html>

Спасибо, что прочитали эту статью! и если эта статья полезна для вас, пожалуйста, хлопайте по этой статье и подписывайтесь на меня, чтобы увидеть больше статей.

Руководство:

Ссылки: