Question

我有一个Web应用程序，它与Typescript一起使用Reactjs作为前端框架。我正在尝试在应用程序中使用opencv.js库，但是在尝试使用库时遇到了麻烦。我跟随this tutorial来构建opencv.js。

我试图在 index.html 中导入脚本，并在opencv准备就绪时在标志中添加了“ onload”回调。我的回调方法在 index.tsx 文件中，运行时出现ReferenceError：openCvIsReady未定义错误。我试图将/ * global 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）

如何将React Web应用程序与opencv.js集成？

0 个答案: