本地运行OpenCV.js教程遇Uncaught ReferenceError错误求助

这个报错本质是OpenCV.js加载完成后会自动尝试调用onOpenCvReady()函数，但你的代码里还没定义这个函数，或者定义时机不对。结合你提到test.js能正常运行的情况，给你几个针对性的解决办法：

1. 直接定义onOpenCvReady函数 #

既然test.js已经能正常执行，那直接在test.js里添加这个函数就行，这样OpenCV.js加载完成后就能找到它：

// 放在test.js里的任意位置（建议顶部）
function onOpenCvReady() {
    console.log("OpenCV.js 加载成功！可以开始处理图像啦");
    // 这里写你的OpenCV业务逻辑，比如初始化摄像头、处理图像等
}

注意要确保test.js在opencv.js之前引入，这样函数在OpenCV.js加载完成前就已经被定义了，HTML里的顺序应该是：

<script src="test.js"></script>
<script async src="opencv.js"></script>

2. 自定义加载回调函数 #

如果你不想用默认的onOpenCvReady函数名，可以直接在引入opencv.js的script标签里指定自定义回调：

<script async src="opencv.js" onload="myCustomReadyFunction();"></script>

然后在test.js里定义对应的函数：

function myCustomReadyFunction() {
    console.log("OpenCV.js 加载完成，自定义回调触发");
    // 你的逻辑代码
}

3. 手动控制OpenCV.js加载（更灵活） #

如果想完全摆脱默认回调的限制，可以在test.js里手动创建script标签加载opencv.js，自己监听加载完成事件：

// test.js里的代码
function loadOpenCV() {
    const opencvScript = document.createElement('script');
    opencvScript.src = 'opencv.js';
    opencvScript.onload = function() {
        console.log("OpenCV.js 手动加载完成，开始执行逻辑");
        // 这里直接写你的OpenCV相关代码，不需要额外的回调函数
        // 比如：cv.imread('imageElement');
    };
    opencvScript.onerror = function() {
        console.error("OpenCV.js 加载失败，请检查路径");
    };
    document.body.appendChild(opencvScript);
}

// 页面加载完成后触发加载
document.addEventListener('DOMContentLoaded', loadOpenCV);

这种方式完全由你控制加载时机和后续逻辑，不会依赖默认的回调函数名。

额外检查点 #

• 确认opencv.js和test.js的路径确实一致，从你说test.js能运行来看这个应该没问题，但可以再核对一下文件名（比如有没有大小写错误，比如opencv.js写成OpenCV.js）
• 如果用了async属性引入opencv.js，可能会导致加载顺序不确定，这时候把test.js放在前面或者用defer属性（确保脚本按顺序执行）

内容的提问来源于stack exchange，提问作者Vetrivel