728x90
<!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();
};
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<script async src="js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>'Opencv' 카테고리의 다른 글
| OpenCV.JS + Bootstrap5 (0) | 2021.02.12 |
|---|---|
| Visual Studio 2019에서 Opencv 프로젝트 세팅하기 (0) | 2021.02.01 |
| 3강: Opencv4 C++강좌: MFC로 PC용 Opencv Application 만들기 (0) | 2020.12.27 |
| 2강: Opencv4 C++ 강좌 : Visual Studio 2019 "Image Watch" 사용방법 (0) | 2020.12.27 |
| 1강: Opencv4 C++ 강좌: VIsual Studio 2019 Project 설정 및 예제코드 사용방법 (0) | 2020.12.26 |