Question

我是Java和React的新手。我想将OpenCV.js嵌入基本的React.js Web应用程序中，以构建在线客户端文档扫描器（我已经在Python中开发了图像处理管道）。

我用yarn create react-app得到了一个基本的React沙盒，其中包含：App.js是主要的React组件，而index.js则将其插入DOM。我添加了一个自定义imageProcessing.js文件，其中包含我的图像处理管道。 yarn start命令可用于编译所有内容并在浏览器中显示结果。

为了在此管道中使用OpenCV，我从official page下载了opencv.js，将其放在imageProcessing.js旁边，最后通过const cv = require('../lib/opencv')对其进行了调用。问题在于yarn start命令需要几个小时才能编译源代码，显然不可能开发任何东西。

现在我的问题是：如何在我的源代码中使用如此繁重的opencv.js（13MB）来有效地编译我的Web应用程序？他们是整合lib的更好方法吗？

感谢您的帮助！

Answer 1

您可以使用CDN来代替本地使用，这样反应不会打扰您。（但请确保您没有/没有足够的数据限制，因为opencv.js是一个繁重的库，每次重新加载页面时它都会请求...），但是您可以将该库存储在PWA中，以便它'将opencv.js存储在浏览器的缓存中，并且每当您重新加载页面时，它都会发送缓存的文件，而不是请求1000次......显然，这会减少带宽的使用，其他一点是，您可以在useEffect中使用它们的函数方法外部组件功能

// opencv.js code here

function App(props){...}

OR

function App(props){
    useEffect(() => {

    // opencv.js code here

    }, [])
}

确保在加载opencv.js文件时让用户知道后台运行中有一些繁重的负载...

如何将OpenCV.js集成到React WebApp中？

1 个答案: