Eng-Tips is the largest forum for Engineering Professionals on the Internet.

Members share and learn making Eng-Tips Forums the best source of engineering information on the Internet!

  • Congratulations JStephen on being selected by the Eng-Tips community for having the most helpful posts in the forums last week. Way to Go!

HTML meaning

Status
Not open for further replies.

charls1

Electrical
Joined
Dec 24, 2022
Messages
29
Location
ID
<!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?
 
charls1,

Try indenting your code...

[pre]
<!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>
[/pre]

--
JHG
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top