步骤

在本教程中，您将学习如何在网页中包含并开始使用 opencv.js。您可以从每个版本中的 opencv-{VERSION_NUMBER}-docs.zip 获取 opencv.js 的副本，或者直接从在线文档 "https://docs.opencv.ac.cn/{VERSION_NUMBER}/opencv.js" 下载预构建的脚本（例如，https://docs.opencv.ac.cn/4.5.0/opencv.js。如果您想要最新的构建版本，请使用 4.x）。您也可以按照教程构建 OpenCV.js 构建自己的副本。

创建一个网页

首先，让我们创建一个简单的网页，能够上传图像。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" />
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></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);
</script>
</body>
</html>

要运行此网页，请复制以上内容并保存到本地 index.html 文件。要运行它，请使用您的 Web 浏览器打开它。

注意: 最好使用本地 Web 服务器来托管 index.html。

包含 OpenCV.js

将 opencv.js 的 URL 设置为 <script> 标签的 src 属性。

注意: 对于本教程，我们将 opencv.js 托管在与 index.html 相同的文件夹中。您也可以选择使用我们在线文档中预构建的 opencv.js 的 URL。

同步加载示例

您可能希望通过 <script> 标签中的 async 属性异步加载 opencv.js。要在 opencv.js 准备就绪时收到通知，您可以将回调注册到 onload 属性。

异步加载示例

使用 OpenCV.js

一旦 opencv.js 准备就绪，您就可以通过 cv 对象访问 OpenCV 对象和函数。 Promise 类型的 cv 对象应该使用 await 运算符进行解包。请参阅 https://mdn.org.cn/en-US/docs/Web/JavaScript/Reference/Operators/await 。

例如，您可以通过 cv.imread 从图像创建一个 cv.Mat。

注意: 由于图像加载是异步的，因此您需要将 cv.Mat 创建放在 onload 回调中。

imgElement.onload = await function() {
cv = (cv instanceof Promise) ? await cv : cv;
let mat = cv.imread(imgElement);
}

许多 OpenCV 函数可用于处理 cv.Mat。您可以参考其他教程，例如图像处理，了解详细信息。

在本教程中，我们只在屏幕上显示一个 cv.Mat。要显示 cv.Mat，您需要一个 canvas 元素。

您可以使用 cv.imshow 在 canvas 上显示 cv.Mat。

cv.imshow("outputCanvas", mat);

将所有步骤放在一起，最终的 index.html 如下所示。

<!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 正在加载...</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 = async function() {
cv = (cv instanceof Promise) ? await cv : cv;
let mat = cv.imread(imgElement);
cv.imshow('canvasOutput', mat);
mat.delete();
};
 
var Module = {
// https://emscripten.cn/docs/api_reference/module.html#Module.onRuntimeInitialized
onRuntimeInitialized() {
document.getElementById('status').innerHTML = 'OpenCV.js 已准备就绪。';
  }
};
</script>
<script async src="opencv.js" type="text/javascript"></script>
</body>
</html>

注意: 您必须调用 cv.Mat 的 delete 方法来释放 Emscripten 堆中分配的内存。有关详细信息，请参阅 Emscripten 的内存管理。

步骤

创建一个网页

包含 OpenCV.js

使用 OpenCV.js

尝试一下