<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Chess.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" , width="200" />
<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 = {
// onRuntimeInitialized() {
document.getElementById("status").innerHTML = "OpenCV.js is ready.";
},
};
</script>
<script async src="opencv.js" type="text/javascript"></script>
</body>
</html>
Guys, please advise the meaning of each coding HTML as above example?
<html>
<head>
<meta charset="utf-8" />
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Chess.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" , width="200" />
<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 = {
// onRuntimeInitialized() {
document.getElementById("status").innerHTML = "OpenCV.js is ready.";
},
};
</script>
<script async src="opencv.js" type="text/javascript"></script>
</body>
</html>
Guys, please advise the meaning of each coding HTML as above example?
