<meta charset="utf-8">
<title>Hello OpenCV.js</title>
<style>

.inputoutput{
  float: left;
}
</style>
</head>
<body>
<h2>Program of OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
  <div class="inputoutput">
    <img id="imageSrc" alt="No Image" />
    <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
  </div>
  <div class="inputoutput">
    <canvas id="canvasOutput" ></canvas>
    <div class="caption">canvasOutput</div>
  </div>
</div>
<script type="text/javascript">
  var imgSrcElement=document.getElementById('imageSrc');
  var imageInput=document.getElementById('fileInput');

  imageInput.addEventListener('change',(e)=>{
    imgSrcElement.src=URL.createObjectURL(e.target.files[0]);
  })

  // 因为是异步操作，所以需要onload等图像加载完毕后执行，也是回调


var opencvLoad=function(){
  document.getElementById('status').innerHTML='opencv is ready';//回调函数，用来显示opencv.js加载完成
  cv['onRuntimeInitialized']=()=>{
    let img = cv.imread("test");
    cv.imshow('canvasOutput', img);
  };


}
</script>

<!-- 异步加载，不对程序进行阻塞 -->
<script async  charset="utf-8" src="opencv.js"  onload="opencvLoad()" type="text/javascript"></script>
</body>