Computer Vision JavaScript — OpenCv Js — How to use OpenCv in JavaScript?

Ali Jakhar

3 min readJul 25, 2021

Introduction

OpenCv is an open source library for image processing, computer vision and machine learning.
OpenCv was created at Intel in 1999 by Gary Bradski.
OpenCv supports different programming languages like python, c++, Java, JavaScript etc.
OpenCv is also available on different platforms including Linux, Windows, Mac, Android, iOS etc.
Using OpenCv we can develop different kinds of algorithms for face detection , object tracking, object recognition, handwriting recognition etc.

OpenCv-js

OpenCv.js helps us to use OpenCv directly on the web.
OpenCv.js helps the web community to interact with computer vision and develops computer vision based algorithms for websites.
OpenCv.js directly runs in the browser so you can see the results in real time.
No need for any type of special server for deployment.

Prerequisite

You have need some knowledge of:

JavaScript
Web Application Development

Project Architecture:

How to use OpenCv in JavaScript?

To use opencv.js we need an IDE where we create web pages and write javascript code. I’m using Sublime Text 3.

Step 1:
The first step is to download the Opencv.js via link: https://docs.opencv.org/3.4.0/opencv.js when you open this link you can see the following text in the new tab:

You can simply select all using Ctrl+A key and copy all text using Ctrl+C. Open Notepad++ and create a new file and paste all copied text in the file and save the file as a javascript file.

Step 2:
In step 2 create simple HTML page.

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

Step 3:
Create h2 tag inside the body tag and assign id to h2 tag for display message on the webpage whether opencv.js is ready for use or not.

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

Step 4:
Create javascript function name “opencvcheck” inside the script tag to get element by id from html tag and assign text “Opencv.js is Ready.” if the function successfully run and keep in mind that define function tag is always come before the load opencv.js tag otherwise it will not be able to find the function and generate the error that the function is not define.

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

Step 5:
Load OpenCv.js in the browser. During load opencv.js I’m using an asynchronous function to check whether a .js file is loaded or not.

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

Step 6:
Run your html file. You can see the following output:

Before loading and after loading opencv.js

Whole code (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>

Thank you for reading this article! and if this article is helpful for you then please Clap on this article and follow me for more articles.

Tutorial:

Complete tutorial

References: