opencvjs 在前端的使用

八分钟de温暖

于 2024-10-09 09:31:40 发布

阅读量275

点赞数 5

文章标签：前端 opencvjs

本文链接：https://blog.csdn.net/weixin_40466351/article/details/141021532

版权

一、opencv 官网

https://opencv.org/

二、opencv是什么

在这里插入图片描述

三、opencvjs前端使用网站

https://docs.opencv.org/4.x/d0/d84/tutorial_js_usage.html

https://docs.opencv.org/4.x/d5/d10/tutorial_js_root.html

四、opencvjs demo 举例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello 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">
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();
};



 
var Module = {
  // https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitialized
  onRuntimeInitialized() {
    document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
  }
};
</script>
<script async src="https://docs.opencv.org/4.x/opencv.js" type="text/javascript"></script>

</body>
</html>