title: Tutorial - Adding OpenCV JS to an ELECTRON project
body: <p><strong>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.</strong></p>
  
  <p>I'm running windows 10 and am developing an Electron application running Node v12.16.1 and electron v8.2.0.</p>
  
  <p>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. </p>
  
  <p><strong>This is the way I managed to get it to work:</strong></p>
  
  <pre><code>&lt;script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady()" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>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 <code>let cv = require('cv')</code> or similar things I've seen come by. Once this file is loaded it will call <code>onOpenCvReady()</code>.</p>
  
  <p>In your HTML file, you can now just run the example from the OpenCV website.</p>
  
  <pre><code>&lt;script&gt;
  let imgElement = document.getElementById('imageSrc');
  let inputElement = document.getElementById('fileInput');
  
  inputElement.addEventListener('change', (e) =&gt; {
    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.';
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I hope this works for you!</p>
  
  <p>My total example roughly looked like this: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;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"&gt;
  &lt;link rel="stylesheet" href="mainWindow.css"&gt;
  &lt;head&gt;
      &lt;title&gt;Man Machine Exhibition&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;    
      &lt;div class='container'&gt;
      &lt;p id="status"&gt;OpenCV.js is loading...&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="inputoutput"&gt;
              &lt;img id="imageSrc" alt="No Image" /&gt;
              &lt;div class="caption"&gt;imageSrc &lt;input type="file" id="fileInput" name="file" /&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="inputoutput"&gt;
              &lt;canvas id="canvasOutput" &gt;&lt;/canvas&gt;
              &lt;div class="caption"&gt;canvasOutput&lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;script&gt;
  let imgElement = document.getElementById('imageSrc');
  let inputElement = document.getElementById('fileInput');
  inputElement.addEventListener('change', (e) =&gt; {
    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.';
  }
  &lt;/script&gt;
  &lt;script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady()" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>