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>
Categories: OpenCV

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

File Charset Converter
: help you to convert character encoding of file.

X
A prohibited operation
0
Would love your thoughts, please comment.x
()
x