opencv.js-基础教程-引入-基础图像处理-常用操作-视频流处理-特征检测-性能优化技巧-完整示例代码

1. 引入 OpenCV.js

方式一：直接加载官方脚本

<script async src="https://docs.opencv.org/4.5.5/opencv.js" onload="onOpenCvReady();"></script>
<script>
  function onOpenCvReady() {
     
    console.log('OpenCV.js is ready');
    // OpenCV 全局变量 `cv` 可用
  }
</script>

方式二：NPM 安装（需配合构建工具）

npm install opencv-js

import * as cv from 'opencv-js';

2. 基础图像处理

加载图像（需配合 Canvas）

const imgElement = document.getElementById('imageSrc');
const mat = cv.imread(imgElement); // 转为 OpenCV 的 Mat 对象

显示图像

cv.imshow('outputCanvas', mat); // 输出到指定 Canvas

释放内存（关键！）

mat.delete(); // 手动释放 Mat 对象内存

3. 常用操作示例

灰度化

const dst = new cv.Mat();
cv.cvtColor(mat, dst, cv.COLOR_RGBA2GRAY);
cv