CODEWITHSUNDEEP
javascriptopencvopencv3.0
Chetan P
Chetan P

Reputation: 187

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"

Upvotes: 2

Views: 13562

Answers (2)

nphoanh
nphoanh

Reputation: 134

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.

Upvotes: 3

Agnohendrix
Agnohendrix

Reputation: 610

one 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.org/3.4/opencv.js Just change in 

<script async src="https://docs.opencv.org/3.4/opencv.js"
onload="onOpenCvReady();" type="text/javascript">
</script>

Upvotes: 4

Related Questions