如何在 React WebApp 中集成 OpenCV.js？答案

【问题标题】：How to integrate OpenCV.js in a React WebApp?如何在 React WebApp 中集成 OpenCV.js？
【发布时间】：2019-04-30 05:22:56
【问题描述】：

我是 Javascript 和 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 的更好方法吗？

感谢您的帮助！

【问题讨论】：

将opencv.js 作为<script> 包含在您的index.html 中。
你也可以查看brainhub.eu/blog/opencv-react-native-image-processing
谢谢，Chris G。对于我对这些语言的巨大误解，我真的很抱歉，但现在我有一个` ` 在我的 HTML 文件中，我应该如何将它导入我的 imageProcessing.js 以便在其中使用例如 cv.imread() ？
如果 imageProcessing.js 被 webpack 打包，你需要把 /* global cv */ 放在顶部。这应该允许您在脚本中使用cv 而不会抱怨 cv 未定义。
@fewber 你找到解决方案可以发布你的代码吗？

标签： javascript reactjs opencv

【解决方案1】：

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

// opencv.js code here

function App(props){...}

或

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

    // opencv.js code here

    }, [])
}

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

【讨论】：