如何在浏览器中加载和初始化 OpenCV.js？

在浏览器中加载 OpenCV.js 主要有以下几种方式：

1. 使用 CDN 直接引入（推荐）

html
<script async src="https://docs.opencv.org/4.8.0/opencv.js" onload="onOpenCvReady()" type="text/javascript"></script>

2. 下载本地引入

从 OpenCV 官网下载 opencv.js 文件，放在项目中：

html
<script src="path/to/opencv.js"></script>

3. 使用 npm 包

bash
npm install @techstark/opencv-js

javascript
import cv from '@techstark/opencv-js';

加载注意事项

1. 异步加载：OpenCV.js 文件较大（约 8-10MB），建议使用 async 属性异步加载
2. 加载检测：使用 cv['onRuntimeInitialized'] 确认加载完成

javascript
function onOpenCvReady() {
  console.log('OpenCV.js is ready');
  // 开始使用 OpenCV 功能
}

1. 性能优化：

   • 使用压缩版本（opencv.js.gz）减少加载时间
   • 配置 CDN 缓存策略
   • 考虑使用 Service Worker 缓存

2. 兼容性：

   • 需要浏览器支持 WebAssembly
   • IE 浏览器不支持（需要 polyfill 或降级方案）

最佳实践

javascript
// 检测 OpenCV 是否加载完成
if (typeof cv !== 'undefined' && cv.getBuildInformation) {
  console.log('OpenCV.js loaded successfully');
  console.log(cv.getBuildInformation());
}