mirror of
https://gitcode.com/gh_mirrors/es/esp32-opencv.git
synced 2025-08-14 18:50:49 +08:00
61 lines
1.9 KiB
HTML
61 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Hello OpenCV.js</title>
|
|
<link href="js_example_style.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<h2>Hello OpenCV.js</h2>
|
|
<p id="status">OpenCV.js is loading...</p>
|
|
<div>
|
|
<table cellpadding="0" cellspacing="0" width="0" border="0">
|
|
<tr>
|
|
<td>
|
|
<img id="imageSrc" alt="No Image" class="small" />
|
|
</td>
|
|
<td>
|
|
<canvas id="canvasOutput" class="small" height="300px"></canvas>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" accept="image/*" /></div>
|
|
</td>
|
|
<td>
|
|
<div class="caption">canvasOutput</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<script src="utils.js" type="text/javascript"></script>
|
|
<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() { // eslint-disable-line no-unused-vars
|
|
document.getElementById('status').innerHTML = '<b>OpenCV.js is ready</b>.' +
|
|
'You can upload an image.<br>' +
|
|
'The <b>imageSrc</b> is a <img> element used as cv.Mat input. ' +
|
|
'The <b>canvasOutput</b> is a <canvas> element used as cv.Mat output.';
|
|
}
|
|
|
|
function onOpenCvError() { // eslint-disable-line no-unused-vars
|
|
let element = document.getElementById('status');
|
|
element.setAttribute('class', 'err');
|
|
element.innerHTML = 'Failed to load opencv.js';
|
|
}
|
|
</script>
|
|
<script async src="opencv.js" type="text/javascript" onload="onOpenCvReady();" onerror="onOpenCvError();"></script>
|
|
</body>
|
|
</html>
|