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

Posted 2023-02-21

【中文标题】如何在 React WebApp 中集成 OpenCV.js？

【英文标题】：How to integrate OpenCV.js in a React WebApp?

【发布时间】：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 你找到解决方案可以发布你的代码吗？

【参考方案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 文件时让用户知道后台运行的一些繁重负载...