The post shows a simple example about how to display a selected image by opencv.js in web page.
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" style="display: none;">
<div class="caption"><input type="file" id="fileInput" name="file"></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
</div>
</div>
<script async="" src="/functions/opencv/opencv.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();
};
</script>
