Process images with OpenCV directly inside a web page!
Table Of Content
  As a multi-platform library, OpenCV can be used with an extensive number of languages including, of course, Javascript.
  Doing image processing tasks directly in the browser can be very useful, after all… a big part of the internet is based on multimedia content (hence, video and images). There’s also HTML 5 which allowed us to access each pixel image via canvas API, making everything even easier.
OpenCV.js
  OpenCV.js is a JavaScript binding for a large subset of OpenCV functions. It could be loaded in a webpage by the <script> tag. It could take a bit to load ( the file has around 8 Mb) So be advised that it may not be ready immediately. We always can load it asynchronously by adding async to the tag. The resulting call is as follows:
- Note that the script link is from the official OpenCV website. You can always download it and make it available from your server.
The code
Everything will be done using usual tags, such as divs , img and canvas . So, to show the image:
1 2 3 4 | <div> <img id="imageSrc" style="border: none;"/> <canvas id="canvasOutput" width="300"></canvas> </div> |
  As mentioned, it is important to load the script asynchronously. Then, it’s necessary to warn the user of the current script state (loading/loaded)
1 2 3 4 5 6 7 | [...] <p id="status">OpenCV.js status: Loading...</p> [...] function onOpenCvReady() { document.getElementById('status').innerHTML = 'OpenCV.js status: Ready.'; } |
  The script that does the heavy lifting:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> 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.cvtColor(mat, mat, cv.COLOR_RGB2GRAY, 0); cv.Canny(mat, mat, 50, 100, 3, false); cv.imshow('canvasOutput', mat); mat.delete(); }; </script> |
  Noticed something? The image processing code we used is the same as we use in other languages. This code simply runs a Canny edge detector on an image:
1 2 3 4 5 | let mat = cv.imread(imgElement); cv.cvtColor(mat, mat, cv.COLOR_RGB2GRAY, 0); cv.Canny(mat, mat, 50, 100, 3, false); cv.imshow('canvasOutput', mat); mat.delete(); |
  The full code is as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <div style="border: thin solid black;"> <center> <h2>OpenCV.js Magic box :)</h2> <p id="status">OpenCV.js status: Loading...</p> <div> <div class="row-align"> <img id="imageSrc" style="border: none;" /> <canvas id="canvasOutput" width="300"></canvas> </div> <input type="file" id="fileInput" name="file" /> </div> </center> <script type="text/javascript"> 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.cvtColor(mat, mat, cv.COLOR_RGB2GRAY, 0); cv.Canny(mat, mat, 50, 100, 3, false); cv.imshow('canvasOutput', mat); mat.delete(); }; function onOpenCvReady() { document.getElementById('status').innerHTML = 'OpenCV.js status: Ready.'; } </script> <script async src="https://docs.opencv.org/4.5.4/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script> </div> |
  This code as rendered by your page generates output as shown below, fully interactive and ready to use, have fun!
OpenCV.js Magic box 🙂
OpenCV.js status: Loading…
Is possible to test Opencv.js online on the link below
https://opencvflow.org/
https://online.opencvflow.org/