我有一个Web应用程序，它与Typescript一起使用Reactjs作为前端框架。我正在尝试在应用程序中使用opencv.js库，但是在尝试使用库时遇到了麻烦。我按照this tutorial来构建opencv.js。
我试图在index.html中导入脚本，并在opencv准备就绪时向标志添加了“ onload”回调。我的回调方法在index.tsx文件中，运行时出现ReferenceError：未定义openCvIsReady错误。我试图将/ *全局cv * /放在我的index.tsx中，如下面问题的注释中所述，但这不起作用。
How to integrate OpenCV.js in a React WebApp?
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Test app">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="root"></div>
</body>
<script async src="../opencvLibs/build_js_wasm/bin/opencv.js" type="text/javascript" onload="openCvIsReady()"></script>
</html>
index.tsx
/* global cv */
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import App from './components/App'
import { MenuItemTransportLayer } from;
import { AppStore } from './store/AppStore';
import { RootStore } from './store/RootStore';
import 'bootstrap/dist/css/bootstrap.min.css';
class InnerApp extends React.Component{
render(){
return(
<Provider rootStore = {new RootStore()}>
<App/>
</Provider>
)
}
}
ReactDOM.render(
<Provider>
<InnerApp />
</Provider>,
document.getElementById('root'));
function openCvIsReady() {
console.log('OpenCV.js is ready');
}
预期的结果是，从index.tsx openCvIsReady进行的回调将在控制台“ OpenCV.js准备就绪，并且我也可以使用cv来执行一些opencv任务，例如加载图像，连接到相机等。
实际结果是应用程序启动时出错
未捕获的ReferenceError：未定义openCvIsReady在HTMLScriptElement.onload（（index）：16）
简短的答案（我认为）是这必须归因于可变作用域（请参阅[1]）。要使opencv.js与React或与此相关的任何节点项目都能很好地配合使用，请参见[2]
[2] https://docs.opencv.org/3.4/dc/de6/tutorial_js_nodejs.html