<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello OpenCV.js</title> <link href="js_example_style.css" rel="stylesheet" type="text/css" /> </head> <body> <h2>Hello OpenCV.js</h2> <p id="status">OpenCV.js is loading...</p> <div> <table cellpadding="0" cellspacing="0" width="0" border="0"> <tr> <td> <img id="imageSrc" alt="No Image" class="small" /> </td> <td> <canvas id="canvasOutput" class="small" height="300px"></canvas> </td> </tr> <tr> <td> <div class="caption">imageSrc <input type="file" id="fileInput" name="file" accept="image/*" /></div> </td> <td> <div class="caption">canvasOutput</div> </td> </tr> </table> </div> <script src="utils.js" type="text/javascript"></script> <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.imshow('canvasOutput', mat); mat.delete(); }; function onOpenCvReady() { // eslint-disable-line no-unused-vars document.getElementById('status').innerHTML = '<b>OpenCV.js is ready</b>.' + 'You can upload an image.<br>' + 'The <b>imageSrc</b> is a <img> element used as cv.Mat input. ' + 'The <b>canvasOutput</b> is a <canvas> element used as cv.Mat output.'; } function onOpenCvError() { // eslint-disable-line no-unused-vars let element = document.getElementById('status'); element.setAttribute('class', 'err'); element.innerHTML = 'Failed to load opencv.js'; } </script> <script async src="opencv.js" type="text/javascript" onload="onOpenCvReady();" onerror="onOpenCvError();"></script> </body> </html>