Question

基本上，我不能同时运行opencv.js和react.js，因为（我认为）opencv.js太大（7.8mb），无法进行纱线编译（我得到最大的调用栈错误）。鉴于此，我也无法将opencv.js加载到index.html中，因为它加载太慢，以至于React无法将其加载，给了我cv is not defined。

创建一个onLoad =“ myfunc（）”函数使我最着急，因为我可以将var loaded设置为true并在ReactDOMrender周围包装if语句。但是当var更改为true且从不渲染时，它永远不会出现。

我尝试了以下操作：

1）将opencv.js脚本直接导入到我正在测试的index.js中。我收到最大调用堆栈错误。我猜这是因为opencv.js约为8mb，编译器不喜欢它吗？

2）我尝试在opencv.js文件中添加public/index.html。我使用async加载它，并将/*global cv*/添加到我的index.js文件的顶部。我收到错误cv未定义。

import React from 'react';

/*global cv*/
var mytest = function() {
    var test = cv.Mat();
    console.log(test + ' if you see something before this, opencv loaded');
}
mytest();


function App() {
  return (
    <div>hello world</div>
)}

export default App;

和index.html中的

：

<script async src="opencv.js" type="text/javascript"></script>

这失败，并说未定义cv。我还尝试过使用onLoad="whenOpenCvLoads()"使用此函数将var设置为true，并包装（我相信是）第一个被调用的函数，如下所示：

if(openCvIsReady === true){
    ReactDOM.render(<App />, document.getElementById('root')); 
    console.log(openCvIsReady + ' in react');
}

计算结果为false，并且在变量最终变为true时永远不会运行。

任何想法都会受到欢迎！

Answer 1

我正在使用包裹捆绑器在React上使用OpenCV 3.4，您只能使用import来尝试。看看下面的这个屏幕截图。

Result

Code

React.js + OpenCV.js ReferenceError：未定义cv

1 个答案: