Tutorial - Adding OpenCV JS to an ELECTRON project

I've been stuck on this for the last few hours so I'll just post the answer to my question here so you won't have to.

I'm running windows 10 and am developing an Electron application running Node v12.16.1 and electron v8.2.0.

I've been following various tutorials and none of them worked or managed to break in some other convoluted way. I tried opencv4nodejs and various other solution and this ended up the most reliable way to get OpenCV js to work.

This is the way I managed to get it to work:

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

just add this line at the end of your HTML file. This script will automatically load a pre-compiled js file from the OpenCV site which I'm pretty sure they never mention. This script is pretty much equivalent to let cv = require('cv') or similar things I've seen come by. Once this file is loaded it will call onOpenCvReady().

In your HTML file, you can now just run the example from the OpenCV website.

<script>
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');

inputElement.addEventListener('change', (e) => {
  imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);

imgElement.onload = function() {
  let mat = cv.imread(imgElement);
  cv.imshow('canvasOutput', mat);
  mat.delete();
};

// Entry Point: 
function onOpenCvReady() {
  document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>

I hope this works for you!

My total example roughly looked like this:

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="mainWindow.css">
<head>
    <title>Man Machine Exhibition</title>
</head>
<body>    
    <div class='container'>
    <p id="status">OpenCV.js is loading...</p>
    </div>
    <div class="container">
        <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>
</body>
<script>
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
  imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {
  let mat = cv.imread(imgElement);
  cv.imshow('canvasOutput', mat);
  mat.delete();
};
function onOpenCvReady() {
  document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady()" type="text/javascript"></script>
</html>

Tutorial - Adding OpenCV JS to an ELECTRON project

0 Answers