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

OpenCV.js 在浏览器里不能只看 script onload，真正可用要等 WASM 运行时初始化完成。常见方式有三种：CDN 引入、本地静态文件、npm 包。最稳的判断是监听 cv.onRuntimeInitialized，否则很容易出现 cv.imread is not a function 或方法尚未挂载的问题。

追问

CDN 怎么写才安全？

script 的 onload 只代表文件下载完成，不代表 OpenCV 运行时准备好了。应在 onload 里设置 cv.onRuntimeInitialized，初始化完成后再启用按钮或调用图像处理逻辑。

npm 包适合什么场景？

适合工程化项目，比如 React、Vue。@techstark/opencv-js 用起来方便，但仍要处理异步初始化，不能在模块导入后立刻假设所有 API 都可用。

加载慢怎么办？

OpenCV.js 体积通常较大，建议使用 CDN 缓存、gzip/br 压缩、按需加载，并把初始化状态做成 Promise，避免多个组件重复加载。

浏览器兼容要注意什么？

OpenCV.js 依赖 WebAssembly，老旧浏览器支持不好。读取跨域图片时还要配置 CORS，否则 cv.imread 背后的 Canvas 读取会因为安全策略失败。

写段代码

html
<script async src="https://docs.opencv.org/4.x/opencv.js" onload="initCv()"></script>
<script>
function initCv() {
  cv.onRuntimeInitialized = () => {
    console.log('OpenCV.js ready');
    document.querySelector('#run').disabled = false;
  };
}
</script>