如何在 React WebApp 中集成 OpenCV.js? [英] How to integrate OpenCV.js in a React WebApp?

问题描述

我是 Javascript 和 React 的新手.我想将 OpenCV.js 嵌入到一个基本的 React.js Web 应用程序中来构建一个在线客户端文档扫描仪(我已经有了用 Python 开发的图像处理管道).

I'm new to Javascript and React. I would like to embed OpenCV.js into a basic React.js web app to build an online client-side document scanner (I already have the image processing pipeline developped in Python).

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

I used yarn create react-app to get a basic working React sandbox containing : App.js which is the main React component and index.js which plugs it into the DOM. I added a custom imageProcessing.js file that will contain my image processing pipeline. A yarn start command is available to compile everything and display the result in my browser.

为了在这个管道中使用 OpenCV，我从 官方页面，放在imageProcessing.js旁边，最后通过const cv = require('../lib/opencv')调用.问题是 yarn start 命令编译源代码需要几个小时，显然不可能开发任何东西.

In order to use OpenCV in this pipeline, I downloaded opencv.js from official page, put it next to imageProcessing.js and finally called it through const cv = require('../lib/opencv'). The problem is the yarn start command compiles sources for hours and it is clearly not possible to develop anything.

现在我的问题是:如何在我的源代码中使用沉重的 opencv.js (13MB) 有效地编译我的网络应用程序?他们是集成 lib 的更好方法吗?

Now my question is : how to efficiently compile my web app with that heavy opencv.js (13MB) in my sources ? Is their a better way of integrating the lib ?

感谢您的帮助！

推荐答案

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

You could use a cdn instead of using locally this way react won't bother you. (but make sure that you don't have/have sufficient data limit because opencv.js is a heavy library & it'll request everytime when you reload page...) but you can store that library in catch with PWA so that it'll store opencv.js in browser's cache & whenever you reload page it'll send cached file instead of request 1000s of times... & obviously it'll reduce bandwidth usage & other point is you can use their functions methods in useEffect or outside component function

// opencv.js code here

function App(props){...}

或

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

    // opencv.js code here

    }, [])
}

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

make sure to let the user know that some heavy loading in background running while loading the opencv.js file...

这篇关于如何在 React WebApp 中集成 OpenCV.js?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！