OpenCV is programming functions mainly aimed at real-time computer vision. it's a great tool for everyone who wants to learn Computer vision, how to make a Face recognition app and object detection. OpenCV is supported by many programming languages like c++, python and also javascript. Today we will learn how to install OpenCV for JavaScript and how to use it to display an image.
Install OpenCV
First of all, go to this link: Opencv.js
a javascript code will show up, copy that code and paste it in your favorite text editor, for me I use VScode but it does not matter the text editor that you use because the result is the same.
now create an HTML file and inside the head, tag add this code
<script async src='opencv.js'></script>
now we will add an image and a canvas object inside our body tag and we will create a simple script to load an image using the OpenCV library
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>OpenCV Sample</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script async src='opencv.js'></script>
</head>
<body>
<img id="input">
<input type="file" id="file_input">
<canvas id="output"></canvas>
</body>
</html>
now let's focus on creating our javascript script to load the image using the input file. we will then upload our canvas to display the grayscale version of our image. using this code
<script>
let img = document.getElementById("input");
let file_input = document.getElementById("file_input");
file_input.addEventListener('change',e =>{
img.src = URL.createObjectURL(e.target.files[0])
},false);
img.onload = function(){
let mat = cv.imread(img);
cv.cvtColor(mat,mat,cv.COLOR_RGB2GRAY);
cv.imshow('output',mat);
}
</script>
now add this portion of code inside your body and run your HTML page you will see the result.
Of course, we can't see each function of OpenCV because it will take more than a simple article, but invite you to check OpenCV's documentation and learn more about this library.
How to install OpenCv for javascript
Reviewed by Medics
on
March 23, 2020
Rating:
Reviewed by Medics
on
March 23, 2020
Rating:
No comments: