How can I read images in opencv js. I m not able to do it by the help of opencv javascript documentation. Can someone please write some code here to help me how to read images in "opencv js"
How can I read images in opencv js. I m not able to do it by the help of opencv javascript documentation. Can someone please write some code here to help me how to read images in "opencv js"
Share Improve this question asked Sep 21, 2018 at 7:29 Chetan PChetan P 1972 gold badges3 silver badges15 bronze badges2 Answers
Reset to default 4one of the first tutorials on OpenCV.js official site does exactly what you're asking for.
I'll post the code here and explain you how it works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<!-- we create 1 image element, 1 canvas element and an image source -->
<div class="inputoutput">
<img id="imageSrc" alt="No Image" />
<div class="caption">imageSrc <input type="file" id="fileInput" name="file"/>
</div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput" ></canvas>
<div class="caption">canvasOutput</div>
</div>
</div>
<script type="text/javascript">
// Here starts javascript. We save the loaded image in a variable called
// imgElement
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
// We add a listener which starts when an image is loaded
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {
// Image is loaded, we can start working with OpenCV
// We read the loaded image from imgElement and save it in a variable
// we could modify later with OpenCV functions
let mat = cv.imread(imgElement);
// We print the saved or modified image to the canvas element with id
// 'canvasOutput'
cv.imshow('canvasOutput', mat);
// Free memory
mat.delete();
};
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript">
</script>
</body>
</html>
You can modify you image using OpenCV functions and OpenCV objects. Most used is cv.Mat()
You can try modifying the previous code to GreyScale by replacing cv.imshow('canvasOutput', mat) with this code:
let dst = new cv.Mat();
cv.cvtColor(mat, dst, cv.COLOR_RGBA2GRAY);
cv.imshow('canvasOutput', dst);
You can use this link to load Opencv.js if you didn't manage to configure it on your machine: https://docs.opencv/3.4/opencv.js Just change in
<script async src="https://docs.opencv/3.4/opencv.js"
onload="onOpenCvReady();" type="text/javascript">
</script>
In html file you must have an image for OpenCV read it like this:
<img id="img" src="replace by image URL"/>
After that, go to your js file and read it by OpenCV:
let src = cv.imread('img'); //img is the id you have declared from html file
Now you can handle your image with the variable src like in OpenCV.js docs.