У меня есть веб-приложение, которое использует Reactjs в качестве интерфейсной среды вместе с Typescript. Я пытаюсь использовать библиотеку opencv.js в своем приложении, но у меня возникают проблемы, когда я пытаюсь использовать библиотеку. Я следовал этому руководству для создания opencv.js.
Я попытался импортировать скрипт внутри index.html , и я добавил обратный вызов onload для флага, когда opencv готов. Мой метод обратного вызова находится в index.tsx файле, и при запуске я получаю ReferenceError: openCvIsReady не определена ошибка. Я попытался поместить / * global cv * / в мой index.tsx, как это было описано в комментариях к вопросу ниже, однако это не сработало.
Как интегрировать OpenCV.js в 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, таких как загрузка изображений, подключение к камере и т. Д.
Фактический результат - ошибка при запуске приложения
Uncaught ReferenceError: openCvIsReady не определен
в HTMLScriptElement.onload ((индекс): 16)