Вступление
- 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>
Спасибо, что прочитали эту статью! и если эта статья полезна для вас, пожалуйста, хлопайте по этой статье и подписывайтесь на меня, чтобы увидеть больше статей.
Руководство:
Ссылки:
- Https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html
- Https://www.digitalocean.com/community/tutorials/introduction-to-computer-vision-in-javascript-using-opencvjs
- Https://www.geeksforgeeks.org/async-await-function-in-javascript/
- Https://www.youtube.com/playlist?list=PLtFVvICfvkc016uGQWV77CKZTXEdXOWPQ
- Https://www.youtube.com/watch?v=2vcUiSGfJV4&list=PLtFVvICfvkc016uGQWV77CKZTXEdXOWPQ
- Https://nirmaniwarakaulla.medium.com/advanced-computer-vision-with-opencv-python-using-google-colab-23458173105d?source=topics_v2---------4-84---- ---------------- 6e49342b_4081_4e8c_bea2_cdc945730b20 ------- 19
- Https://medium.com/nerd-for-tech/image-processing-cartoonify-your-image-using-opencv-python-f73418f761d7